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);
    })
);

sample.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 的错误。它允许您在发生错误时执行某些操作，而无需更改流的任何内容。

但是，如果您想捕获错误然后成功完成流式传输（现在您已经捕获并处理了错误），通常看起来像这样。

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

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

这两种方法都将错误的流转换为成功的流，该流将在最终订阅中调用 complete 处理程序而不是 error 处理程序。

Angular 拦截器中的错误完成请求

Complete request on error in Angular Interceptor

rxjs

angular-http-interceptors

angular