Question

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

login.component.ts

  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，但也成功执行了回调。

我在这里做错了什么？预先感谢。

编辑：

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

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

如果满足此条件，您可以添加&& headers.get（'Content-Type'）。includes（'application / problem + json'），但是angular会自动处理所有错误（400码-500码）。

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

1 个答案: