使用调用API时处理错误

时间:2019-01-07 12:34:42

标签: angular angular6 angular7 angular-httpclient

在Angular 7组件上,我正在调用服务:

this.postService.getByCategoryId(10)

    .subscribe((response: GetPostsByCategoryIdResponse>) => {

      this.posts = response.map((post: PostModel) => ({ 
        id: response.id, 
        title: response.title, 
        category: response.category.name
      }));

    });

我正在将模仿API返回的数据结构的GetPostsByCategoryIdResponse映射到组件中使用的PostModel。

PostService的GetByCategoryId正在调用API:

  public GetByCategoryId(id: number): Observable<GetPostsByCategoryIdResponse> {

    return this.httpClient.get<GetPostsByCategoryIdResponse>(url);

  }

如何处理调用API时可能发生的错误?

1 个答案:

答案 0 :(得分:1)

  

要捕获错误,您可以通过RxJS catchError()运算符“传递”来自http.get()的可观察结果。

https://angular.io/tutorial/toh-pt6#error-handling

return this.httpClient.get<GetPostsByCategoryIdResponse>(url)
   .pipe(catchError((error) => {
          // some code
         return throwError("some error");
    })

此外,为了模仿postModel接受的数据,您可以使用rxjs的map()运算符修改Observable,而不用在subscribe()中修改结果。

return this.httpClient.get<GetPostsByCategoryIdResponse>(url)
   .pipe(
        map(data) => {
           // your mapping
           return mappedData
        },
        catchError((error) => {
              // some code
             return throwError("some error");
        })