Как я могу обрабатывать ошибки HTTP-запросов индивидуально при использовании mergeMap в Angular?

Question

Я создаю цепочку http-запросов в Angular, используя mergeMap. Цепной запрос работает нормально - у меня проблемы с обработкой ошибок. Я хотел бы запустить разные логи c в зависимости от того, какой запрос не удается. Например, если первый запрос не удался, я бы хотел 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?

Answer 1

Я думаю, что вы можете обрабатывать ошибки в рамках одной подписки, как и вы. У нас есть ошибка обратного вызова, где мы получаем HttpErrorResponse . В этом есть свойство url , из которого вы можете отличить guish, какой 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, если он совпадает с URL-адресом API 1-го запроса, мы можем подтвердить, что из-за этого произошла ошибка. Иначе это происходит от второго вызова 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

Надеюсь, это поможет.

Answer 2

Я думаю, вы должны сделать что-то вроде этого:

this.service.request1()
  .pipe(
    mergeMap(result => {
      let resultId = result.id;
      return this.service.request2(resultId).pipe(catchError(err => {
        // 1. You can handle the error and do some logic here
        // 2. Or you can pass some data in throwError and determine in subscribe (error callback) failed request 

        return throwError(resultId);
      }));
    }),
  ).subscribe(
    () => {},
    failedResultId => console.log(`Failure occured for: ${failedResultId}`)
  );

Надеюсь, это поможет;)