angular - 我应该如何修改对 HTTP 请求的响应并在从 Observable 返回之前轻松访问它？

Question

我正在将 Angular 升级到版本 5，我之前使用的是 @angular/http，现在我需要更新到 @angular/common/http 并使用HttpClient

我已经在服务中(而不是在组件中)发出 http 请求，这使它们易于重用

这是我已经拥有的(来自已弃用的 http)

return this.http.get(url, {headers: this.headers}).map(
      (response: Response) => {
        const data = response.json();
        // Does something on data.data
        
        // return the modified data:
        return data.data;
      }
    ).catch(
      (error: Response) => {
        return Observable.throw(error);
      }
    );

现在，根据我从新的 HttpClient 中学到的知识，我无法修改响应并将其提供给订阅它的组件方法。

我应该如何修改对 HTTP 请求的响应并在从 Observable 返回之前轻松访问它？

我只想要修改从 API 获得的响应的相同能力......比如向它添加一些项目，或者在返回它之前对它做一些更多的事情

Answer 1

这完全取决于 RxJs 的版本。 Angular 6 随 RxJs 6 一起发布——这意味着 map()/catch() 方法不再有效。

相反，您必须使用 pipe + map()/catchError()，如下所示:

在 Angular 6/RxJs 6 之前 - 经典的 Http 使用:

return this.http.get(url, {headers: this.headers}).map(
  (response: Response) => {
    const data : SomeType = response.json() as SomeType;
    // Does something on data.data

    // return the modified data:
    return data.data; // assuming SomeType has a data properties. Following OP post
  }
).catch(
  (error: Response) => {
    throwError(error); // From 'rxjs'
  }
);

应该改成这样:

在 Angular 6/RxJs 6 - HttpClient 迁移之后:

return this.http.get<SomeType>(url, {headers: this.headers})
  .pipe(
     map( response => {  // NOTE: response is of type SomeType
         // Does something on response.data
         // modify the response.data as you see fit.

         // return the modified data:
         return response; // kind of useless
     }),
     catchError( error => {
         return throwError(error); // From 'rxjs'
     })
  ); // end of pipe

在管道中，map() 将获取响应对象(已从 JSON 解析)，如果 HTTP 失败，catchError() 将获取第一个错误。

另外，请注意您的 Headers 也需要是 HttpHeaders 对象。

在 RxJs 6 中读取管道、映射和 catchError