角度攔截HTTP錯誤

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