Angular 7 - .json() 的 HttpClient 问题答案

【问题标题】：Angular 7 - HttpClient problem with .json()Angular 7 - .json() 的 HttpClient 问题
【发布时间】：2019-03-16 10:22:28
【问题描述】：

我正在尝试将我的 get 响应从 json 转换为 array：

export class PostsService {
  apiRoot: string = "https://public-api.wordpress.com/rest/v1.1/sites/en.blog.wordpress.com/posts/?number=3";
  results: PostsItem[];
  loading: boolean;

  constructor(private http: HttpClient) {
    this.results = [];
    this.loading = false;
  }

  getPosts(term: string): Observable<PostsItem[]> {
    let apiURL = `${this.apiRoot}`;
    return this.http.get(apiURL)
    .map( res => {
      let results = res.json().results.map( item => {
        return new PostsItem(
          item.ID,
          item.post_thumbnail,
          item.date,
          item.title,
          item.url,
          item.author,
          item.avatar
        );
      })
      return results;
    });
  }
}

而且我知道当我使用 HttpClient 而不是 Http 时，没有必要使用 .json() 但我在语法上苦苦挣扎。

【问题讨论】：

PostsItem 模型中有什么？
导出类 PostsItem { 构造函数（公共 ID：数字，公共 post_thumbnail：字符串，公共日期：字符串，公共标题：字符串，公共 URL：字符串，公共作者：字符串，公共头像：字符串）{ } }

标签： angular observable httpclient angular7

【解决方案1】：

您应该查看 API 响应的 posts 属性，如下所示（使用 arrow functions 进行简化）：

getPosts(): Observable<PostsItem[]> {
return this.http
  .get(this.apiRoot)
  .map(res =>
    res.posts.map(
      item =>
        new PostsItem(
          item.ID,
          item.post_thumbnail,
          item.date,
          item.title,
          item.url,
          item.author,
          item.avatar
        )
    )
  );
}

现在结果是一个 PostItem 数组

我已经创建了一个工作演示，你可以在这里查看 -> https://codesandbox.io/s/78w2vl0p0

【讨论】：

【解决方案2】：

试试这个语法：

private getData(): Observable<Data> {
   this.http.get<DataType>(url).pipe(
     map(res => this.mapResponse(res))
   );
}

重要的是，您在管道中使用地图。正如您已经提到的那样，res.json 自从引入 HttpClientModule 后就不需要了

【讨论】：

你能尝试在我的代码中实现它吗？我对 Angular 比较陌生
你可以在这里查看我的实现代码codesandbox.io/s/78w2vl0p0。对此的解释在我的回答中。

【解决方案3】：

import { map} from 'rxjs/operators';
import {HttpClient, HttpResponse} from '@angular/common/http'

export class PostsService {
  apiRoot: string = "https://public-api.wordpress.com/rest/v1.1/sites/en.blog.wordpress.com/posts/?number=3";
  results: PostsItem[];
  loading: boolean;

  constructor(private http: HttpClient) {
    this.results = [];
    this.loading = false;
  }

  getPosts(term: string): Observable<PostsItem[]> {
    let apiURL = `${this.apiRoot}`;
    return this.http.get(apiURL).pipe(
         map(this.extractData)
    )
  }

  extractData(res: HttpResponse<any>) {
    const results = res['results'];
    results.map(item => {
      return new PostsItem(
        item.ID,
        item.post_thumbnail,
        item.date,
        item.title,
        item.url,
        item.author,
        item.avatar
      );
    });
    return results;
  }
}

【讨论】：