angular - Angular 4.3 中的 HttpInterceptor : Intercepting 400 error responses

Question

我想拦截 401 和其他错误以便做出相应的 react 。这是我的拦截器:

import { LoggingService } from './../logging/logging.service';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class TwsHttpInterceptor implements HttpInterceptor {

    constructor(private logger: LoggingService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.logger.logDebug(request);    
        return next.handle(request)
            .do(event => {
                if (event instanceof HttpResponse) {
                    this.logger.logDebug(event);
                }
            });
    }
}

虽然这适用于 200 个请求，但它不会拦截错误响应

我在 chrome 的开发控制台中看到的是这样的:

zone.js:2616 GET http://localhost:8080/backend/rest/wrongurl 404 (Not Found)

或者这个

zone.js:2616 GET http://localhost:8080/backend/rest/url 401 (Unauthorized)

我希望我的拦截器能够处理这个问题。我错过了什么？

Answer 1

Http 将错误发送到 observable 的错误流中，因此您需要使用 .catch 捕获它们(您可以阅读更多关于此 here 的信息)。

return next.handle(request)
  .do(event => {
    if (event instanceof HttpResponse) {
      this.logger.logDebug(event);
    }
  })
  .catch(err => { 
    console.log('Caught error', err);
    return Observable.throw(err);
  });