Angular 攔截器中的錯誤完成請求

Question

問題是發生錯誤時，完整的回調無法隱藏加載指示器。 而且我不想在每個請求中都使用 finalize 運算符。 它應該在錯誤攔截器中完成。

error.interceptor.ts

return next.handle(req).pipe(
    timeout(timeOut),
    catchError((error: HttpEvent<any>) => {
        if (error instanceof HttpErrorResponse) {
            if (error.status !== 401) {
                const errorMessage = typeof error.error === 'string' ? error.error : 'Unhandled Error! please try again'
                this.toast.danger('', errorMessage);
            }
            if (error.status === 440) this.userService.logout(true);
        }
            
        return throwError(error);
    })
);

樣本.component.ts

this.proxy.CreateVersion(model).pipe(takeUntil(this.unsubscribe$)).subscribe(
    result => {
        console.log(result)
    },
    console.error,
    () => this.loading.grid = false        // Not Working
)

Answer 1

在您的錯誤中，您捕獲並釋放

catchError(err => {
  /* do some stuff */
  return throwError(err);
})

這實際上相當於tap錯誤。 它使您可以在發生錯誤時執行某些操作，而無需更改 stream 的任何內容。

但是，如果您想捕獲錯誤，然后成功完成 stream（現在您已經捕獲並處理了錯誤），通常看起來像這樣。

catchError(err => {
  /* do some stuff */
  return of({defaultValue});
})

catchError(err => {
  /* do some stuff */
  return EMPTY;
})

這兩種方法都將出錯的 stream 轉換為成功的 stream，它將在最終訂閱中調用complete的處理程序而不是error處理程序。