将多个 HTTP 拦截器添加到 Angular 应用程序

Question

如何向 Angular 4 应用程序添加多个独立的 HTTP 拦截器？

我试图通过使用多个拦截器扩展 providers 数组来添加它们。但是真正执行的只有最后一个，Interceptor1被忽略了。

@NgModule({
  declarations: [ /* ... */ ],
  imports: [ /* ... */ HttpModule ],
  providers: [
    {
      provide: Http,
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =>
        new Interceptor1(xhrBackend, requestOptions),
      deps: [XHRBackend, RequestOptions],
    },
    {
      provide: Http,
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =>
        new Interceptor2(xhrBackend, requestOptions),
      deps: [XHRBackend, RequestOptions]
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我显然可以将它们组合成一个 Interceptor class，这应该可行。但是，我想避免这种情况，因为这些拦截器具有完全不同的用途（一个用于错误处理，一个用于显示加载指示器）。

那么如何添加多个拦截器呢？

Answer 1

Http 不允许超过一个自定义实现。但正如@estus 提到的，Angular 团队最近添加了一个新的 HttpClient 服务（版本 4.3），它支持多个拦截器概念。您不需要像处理旧的 Http 那样扩展 HttpClient。您可以为 HTTP_INTERCEPTORS 提供一个实现，它可以是一个带有 'multi: true' 选项的数组：

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
...

@NgModule({
  ...
  imports: [
    ... ,
    HttpClientModule
  ],
  providers: [
    ... ,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorOne,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorTwo,
      multi: true,
    }
  ],
  ...
})

拦截器：

import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
...

@Injectable()
export class InterceptorOne implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('InterceptorOne is working');
    return next.handle(req);
  }
}

@Injectable()
export class InterceptorTwo implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('InterceptorTwo is working');
    return next.handle(req);
  }
}

此服务器调用将打印两个拦截器的日志消息：

import {HttpClient} from '@angular/common/http';
...

@Component({ ... })
export class SomeComponent implements OnInit {

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://some_url').subscribe();
  }
}

将多个 HTTP 拦截器添加到 Angular 应用程序

Add multiple HTTP Interceptors to Angular Application

http

interceptor

angular-http-interceptors

angular