[RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator-优快云博客

本文探讨了在使用RxJS进行网络请求时如何优雅地处理错误，包括设置默认值及利用finalizer确保某些操作仅运行一次。通过具体示例展示了如何使用catchError和finalizer等操作符。

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
*/