Angular RXJS 使用拦截器全局处理错误答案

【问题标题】：Angular RXJS handle errors globally with interceptorAngular RXJS 使用拦截器全局处理错误
【发布时间】：2020-01-16 13:27:41
【问题描述】：

我是 RXJS 的新手，但遇到了问题。我有几个 HTTP 调用，并希望有一个全局 http 错误拦截器。基本上，我试图捕捉所有错误响应，其中Content-Type 是"problem+json"。到目前为止，这是我尝试过的：

error.interceptor.ts

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      tap(f => f, errorResponse => {
        const {headers} = errorResponse;
        if (errorResponse instanceof HttpErrorResponse && headers.get('Content-Type').includes('application/problem+json')) {
          this.messageService.error(errorResponse.error.title, errorResponse.error.message);
        }
        return throwError(errorResponse);
      })
    );
  }

  submitForm(): void {
    const loginRequest: LoginRequest = new LoginRequest(this.loginForm.value);

    this.http.request(Resource.AUTH, Request.POST, loginRequest)
      .subscribe((next) => {
          this.router.navigate(['/home']);
      }, (error) => {
        console.log(error);
      });
  }

我真正的问题是，应该从错误拦截器调用 messageService，console.log 在错误回调中执行，但不知何故，成功回调也被执行，尽管状态码是 401。

我在这里做错了什么？提前致谢。

编辑：

我刚刚删除了拦截器，检查了成功和错误回调是否都执行了，结果是yes。

【问题讨论】：

标签： angular rxjs

【解决方案1】：

首先，操作员点击它只是一个记录器，因此避免将其用于逻辑目的。

intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            retry(1), // optional
            catchError((error) => {
                console.log("TCL: HttpErrorInterceptor -> constructor -> error", error)

                if (error instanceof HttpErrorResponse) {
                 const {headers} = error;
                this.messageService.error(errorResponse.error.title, 
                 errorResponse.error.message);
                 }
                    return next.handle(request); // go with the flow
                } else {
                  return throwError(error);
               }
               return EMPTY;
            }),
        );
    }

您可以添加 if this condition && headers.get('Content-Type').includes('application/problem+json')，但 Angular 会自动处理所有错误（400codes - 500codes）。

【讨论】：