CODEWITHSUNDEEP
angularrxjs
David
David

Reputation: 34435

rxjs: how to return the result from another observable from catchError

I'm using rxjs 6.5 and angular. Basically, I want to have a method in my service that:

Here is what I have so far. I think I need to use flatMap/mergeMap, but I cannot figure how.

service.ts

public getStatus()
  {
    return this.http.get('http://api.com/status1')
      .pipe(
        catchError(() => {
            //makes 2nd api call here
            return this.http.get('http://api.com/status2')

            .pipe(catchError(() =>
            {
              //both calls failed
              return of({
                  data: 'blah',
                  success: false
                });

            }))

        }));
  }

component.ts

this.service.getStatus().subscribe(status=>this.status = status);

Could somebody help?

Upvotes: 1

Views: 2446

Answers (1)

Maciej Manista
Maciej Manista

Reputation: 178

Your method works, but doesn't look that nice with nested pipes. There is one easy thing you could do though:

      // Use 'of' operator to "fake" a successful API call.
      // Use 'throwError' operator to "fake" a failed API call.
      public getStatus()
      {
        return of('firstApiCall')
          .pipe(
            catchError(() => {
              //makes 2nd api call here
              return of('secondApiCall')
            }),
            catchError(() =>
              {
                //both calls failed
                return of({
                    data: 'blah',
                    success: false
                  });
              })
          );
      }

You can extract the second catchError block to have all operators on one level - catchError operator will only trigger once the observable throws an error, and since you want a different error handling for each call, this would do.

Potentially you could also handle that with only one catchError block and do some checks of the request URL to determine what do you want to return, but I guess that would require more logic and is not worth it.

Please take a look into the provided stackblitz to see this in action:

https://stackblitz.com/edit/angular-rfevnt

Upvotes: 2

Related Questions