时间戳

首页 > 解决方案 > 在 Angular 中使用 mergeMap 时，如何单独错误处理链接的 http 请求？

javascript - 在 Angular 中使用 mergeMap 时，如何单独错误处理链接的 http 请求？

问题描述

我在 Angular 中使用mergeMap. 链接的请求工作得很好——我遇到的问题是错误处理。我想根据哪个请求失败运行不同的逻辑。例如，如果第一个请求失败，我想console.log("failed on request1"). 如果第二个请求失败，我想console.log("failed on request2"). 该方法的（简化）代码如下所示：

  submitRequests(): void {
    this.service.request1()
        .pipe(mergeMap(result => {
          let resultId = result.id;
          return this.service.request2(resultId);
        }))
        .subscribe(() => { console.log("Both requests successful") },
                   err => {
                     // If failed on request1, console.log("failed on request1")
                    // If failed on request2, console.log("failed on request2")
                   });
  }

有谁知道如何在 Angular 中最好地实现这一点？

标签： javascriptangularhttpangular-httpclient

解决方案

我认为您可以像以前一样在一次订阅中处理错误。我们有错误回调，我们得到HttpErrorResponse。在此有url属性，您可以从中区分哪个 API 失败。例子：

this.postService.getPosts()
  .mergeMap(posts => {
    console.log("Posts: ", posts);
    return this.postService.getPost(posts[0].userId);
  }).subscribe(posts => {
    console.log("First Post: ", posts);
    this.postsDetails = posts;
    this.loading = false;
  },(error: HttpErrorResponse)=>{
    if(error){
      if(error.url=="https://jsonplaceholder.typicode.com/posts"){
        console.log("Error coming from 1st API");
      }else{
        console.log("Error coming from 2nd API");
      }
    }
  });

在这里，error.url如果它与第一个请求的 API url 匹配，那么我们可以确认错误来自那个。否则它来自第二个 API 调用。

演示：

https://stackblitz.com/edit/angular-rxjs-operators-examples?file=src%2Fapp%2Fstackoverflow%2Fmerge-map-error%2Fmerge-map-error.component.ts

https://angular-rxjs-operators-examples.stackblitz.io/stackoverflow

希望这可以帮助。

推荐阅读