How to catch error in Observable.forkJoin(...)?

Question

I use Observable.forkJoin() to handle the response after both HTTP calls finishes, but if either one of them returns an error, how can I catch that error?

Observable.forkJoin(   this.http.post<any[]>(URL, jsonBody1, postJson) .map((res) => res),   this.http.post<any[]>(URL, jsonBody2, postJson) .map((res) => res) ) .subscribe(res => this.handleResponse(res)) 

Answer 1

You may catch the error in each of your observables that are being passed to forkJoin:

// Imports that support chaining of operators in older versions of RxJS import {Observable} from 'rxjs/Observable'; import {forkJoin} from 'rxjs/add/observable/forkJoin'; import {of} from 'rxjs/add/observable/of'; import {map} from 'rxjs/add/operator/map'; import {catch} from 'rxjs/add/operator/catch';  // Code with chaining operators in older versions of RxJS Observable.forkJoin(   this.http.post<any[]>(URL, jsonBody1, postJson) .map((res) => res)).catch(e => Observable.of('Oops!')),   this.http.post<any[]>(URL, jsonBody2, postJson) .map((res) => res)).catch(e => Observable.of('Oops!')) ) .subscribe(res => this.handleResponse(res)) 

Also note that if you use RxJS6, you need to use catchError instead of catch, and pipe operators instead of chaining.

// Imports in RxJS6 import {forkJoin, of} from 'rxjs'; import {map, catchError} from 'rxjs/operators';  // Code with pipeable operators in RxJS6 forkJoin(   this.http.post<any[]>(URL, jsonBody1, postJson) .pipe(map((res) => res), catchError(e => of('Oops!'))),   this.http.post<any[]>(URL, jsonBody2, postJson) .pipe(map((res) => res), catchError(e => of('Oops!'))) )   .subscribe(res => this.handleResponse(res)) 

Answer 2

This worked for me:

forkJoin(  this.http.post<any[]>(URL, jsonBody1, postJson).pipe(catchError(error => of(error))),  this.http.post<any[]>(URL, jsonBody2, postJson) ) .subscribe(res => this.handleResponse(res)) 

The second HTTP call will be called normally, even if an error occurs on the first call