Angular 8 - 如何拦截来自（rxjs）的http错误？ [复制]答案

【问题标题】：Angular 8 - How to intercept an http error inside a from (rxjs)? [duplicate]Angular 8 - 如何拦截来自（rxjs）的http错误？ [复制]
【发布时间】：2019-08-08 15:22:36
【问题描述】：

我的拦截器如下所示：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let tokenPromise = this.storage.get('token');

    return from(tokenPromise).pipe(mergeMap(token => {
      let data = {
        headers: request.headers.set('MyToken', token)
      };
      let newReq = request.clone(data);
      return next.handle(newReq);
    }));

}

如何也能拦截 404 错误？

【问题讨论】：

medium.com/@antwaneb/…

标签： angular typescript

【解决方案1】：

请记住，HttpClient 返回一个 Observable，因此您可以像处理任何其他 observable 一样处理错误 - 使用 catchError。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let tokenPromise = this.storage.get('token');
    return from(tokenPromise).pipe(
       mergeMap(token => {...}),
       catchError((error: HttpErrorResponse) => {
          if (error.status === 404) {
             // some logic
          }
          return throwError(error);
       })
    );
}

【讨论】：

【解决方案2】：

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private authenticationService: AuthenticationService, private toastr: ToastrService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(catchError((err) => {
        if (err.status === 404) {
          // do things
        }
    }));
  }
}

还有你的 app.module，在提供者中：

{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}

【讨论】：