Angular HttpClient修改服务中的响应

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);
      }
    );

现在从我从new学到的东西,HttpClient就像我无法修改响应并将其提供给订阅它的组件方法.

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

我只想要同样的能力修改我从API获得的响应...就像添加一些项目,或者在重新调整它之前做一些更多的东西

Answer 1

这一切都取决于RxJ的版本.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 => {
         throwError(error); // From 'rxjs'
     })
  ); // end of pipe

在管道中,map()将获取响应对象(已经从Json解析),如果http失败,catchError()将获取第一个错误.

另外,请注意您的Headers也需要是HttpHeaders对象.

读取RxJs 6中的pipe,map和catchError

Answer 2

根据我的考虑，您可以在成功响应中调用该服务的函数，并在函数中处理您的数据并将其返回以支持它。

return this.http.get(url, {headers: this.headers}).map(
      (response: Response) => {
        const data = response.json();
        return this.processData(data);
      }
    ).catch(
      (error: Response) => {
        return Observable.throw(error);
      }
    );
    
public processData(data : any){
  //process your data
  return data;//this is processed data
}