Question

我想拦截每个请求和错误响应。

我已经可以拦截请求并在标头中设置令牌，并且可以拦截响应以处理刷新令牌。

但是我找不到拦截HttpErrorResponse的方法。

我尝试了2种方法。一个带有显式的rxjs catchError，另一个带有某种回调：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.auth.getToken();
    if (authToken) {
      req = req.clone({ headers: req.headers.set('accesstoken', authToken) });
    }
    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          //handle refresh token
        }
        return event;
      },
      catchError((error: any) => {
        if (error instanceof HttpErrorResponse) {
          console.log(error);
          return Observable.throw(error);
        }
      })));
  }

如果我有一个已过期的令牌，则每个请求都将引发HttpErrorResponse，但是此解决方案无法捕获它。

这是由服务返回的。没有拦截器发出的console.log（）迹象。

服务如下：

public getData(): Observable<any> {
    return this.http
        .get<any>(url)
        .pipe(
            map(res => {
                return res;
            }),
            catchError((e): Observable<any> => {
                console.log(e);
                const res: any = {error: e};
                return of(res);
            })
        );
}

然后我尝试使用“回调语法”：

return next.handle(req).pipe(
  map((event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      // refresh token
    }
    return event;
  }, (error: any) => {
    if (error instanceof HttpErrorResponse) {
      console.log(error);
    }
  }));

与上述结果相同。控制台中什么都没有。

我已经看到人们（https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a）在模块中注册了一个ErrorHandler，但是我还没有尝试过。

如何从拦截器中捕获HttpErrorResponse？

编辑：

我尝试了ErrorHandler方法，但仍然无法获取任何日志。然后，我从服务中删除了catchError，并最终记录了一些内容...

我将尝试看看这是否使拦截器正常工作...如果我必须删除所有catchError，这不好玩：（

我在这里做了一个可复制的示例：https://stackblitz.com/edit/angular-m2jc9n

Answer 1

Angular有一个用于错误处理的钩子（https://angular.io/api/core/ErrorHandler）。

您可以创建一个服务，该服务实现有角度的ErrorHandler并实现handleError方法，您可以在其中记录所有错误。该错误处理程序不仅会记录HttpErrorResponse，还会记录所有错误，但是您可以过滤掉所需的错误。

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
    private static isHttpErrorResponse(error): error is HttpErrorResponse {
        return error instanceof HttpErrorResponse;
    }

    handleError(error: any): void {
        if (CustomErrorHandler.isHttpErrorResponse(error)) {
            console.log(error);
        }
    }
}

角度拦截HTTP错误

1 个答案: