http - angular2 中的 httpinterceptor 等价物是什么？

Question

在angularjs中，我们有http拦截器

$httpProvider.interceptors.push('myHttpInterceptor');

我们可以通过它连接到所有 http 调用，显示或隐藏加载栏，进行日志记录等。

angular2 中的等价物是什么？

Answer 1

正如@Günter 指出的那样，没有办法注册拦截器。您需要扩展 Http 类并围绕 HTTP 调用进行拦截处理

首先，您可以创建一个扩展 Http 的类:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

并按如下所述进行注册:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

可以在调用目标方法之前添加 request 和 requestError 类型。

对于response，您需要将一些异步处理插入到现有的处理链中。这取决于您的需要，但您可以使用 Observable 的运算符(如 flatMap)。

最后，对于 responseError，您需要在目标调用上调用 catch 运算符。这样，当响应中出现错误时，您会收到通知。

此链接可以帮助您:

• Handling refresh tokens using rxjs
• Angular 2 - How to get Observable.throw globally