[RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator

Sometime we want to set a default or fallback value when network request failed.

http$
    .pipe(
        map(res => Object.values['payload']),
        shareReplay(),
        catchError(err => of([])) // return an empty value
);

 

Sometime we want to just throw the error again:

http$
    .pipe(
        catchError(err => {
            return throwError(err)
        }), // put catchError and finalize to make sure they will be only run once
        finalize(() => console.log('Finalize executed...'))
        map(res => Object.values['payload']),
        shareReplay()
);        

 

You know about the finally instruction in the try-catch? What if you wanted to have the same when using RxJS Observables? Surprise, there's actually an RxJS operator :wink: called finalizewhich can be used for exactly that. Let's explore in more details.

private execCall(endpoint: string) {
    this.isLoading = true;
    this.http.get(`/assets/${endpoint}`)
      .pipe(
        tap(x => console.log('tap', x)),
        catchError(err => console.log('did throw') || throwError(err)),
        finalize(() => {
          this.isLoading = false;
          console.log('finalize');
        })
      )
      .subscribe(x => {
        console.log('Got result', x);
      }, (err) => {
        console.error('Got error', err);
      })
  }

/**
did throw
Got error
Error: operators_1.throwError is not a function
finalize
*/