Angular 拦截http错误

Question

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

我已经可以拦截请求并在 header 中设置 token ，并且可以拦截响应以处理刷新 token 。

但是我找不到拦截 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);
        }
      })));
  }

如果我有一个过期的 token ，每个请求都会抛出一个 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 有一个用于错误处理的钩子(Hook) (https://angular.io/api/core/ErrorHandler)。

您可以创建一个实现 angular 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);
        }
    }
}