Aggiungi più intercettori HTTP all'applicazione angolare

Come aggiungere più intercettori HTTP indipendenti a un'applicazione Angular 4?

Ho provato ad aggiungerli estendendo l' providersarray con più di un intercettore. Ma solo l'ultimo viene effettivamente eseguito, Interceptor1viene ignorato.

@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 {}

Ovviamente potrei combinarli in un'unica Interceptorclasse e dovrebbe funzionare. Tuttavia, vorrei evitarlo poiché questi intercettori hanno scopi completamente diversi (uno per la gestione degli errori, uno per mostrare un indicatore di caricamento).

Allora come posso aggiungere più intercettori?

Httpnon consente di avere più di un'implementazione personalizzata. Ma come menzionato da @estus, il team di Angular ha recentemente aggiunto un nuovo servizio HttpClient (versione 4.3) che supporta il concetto di più intercettori. Non è necessario estendere il HttpClientcome fai con il vecchio Http. Puoi invece fornire un'implementazione HTTP_INTERCEPTORSche può essere un array con l' 'multi: true'opzione:

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,
    }
  ],
  ...
})

Intercettori:

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

Questa chiamata al server stamperà i messaggi di registro di entrambi gli intercettori:

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