Ajouter plusieurs intercepteurs HTTP à une application angulaire

Question

Comment ajouter plusieurs, indépendant HTTP intercepteurs à un Angulaires 4 application?

J'ai essayé de les ajouter par l'extension de l' providers tableau avec plus d'un intercepteurs. Mais seul le dernier est réellement exécuté, Interceptor1 est ignoré.

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

Je pourrais évidemment combiner en une seule, Interceptor de la classe et qui devrait fonctionner. Cependant, je tiens à éviter que ces intercepteurs ont des objectifs complètement différents (un pour la gestion des erreurs, l'un pour afficher un indicateur de chargement).

Alors, comment puis-je ajouter plusieurs intercepteurs?

Answer 1

Http ne permet pas d'avoir plus d'une implémentation personnalisée. Mais comme @estus mentionné l'Angulaire de l'équipe a ajouté un nouveau HttpClient service récemment (version 4.3) qui prend en charge plusieurs intercepteurs concept. Vous n'avez pas besoin d'étendre l' HttpClient comme vous le faites avec le vieux - Http. Vous pouvez fournir une implémentation pour HTTP_INTERCEPTORS à la place qui peut être un tableau avec l' 'multi: true' option:

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

Intercepteurs:

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

Ce serveur d'appel d'imprimer les deux intercepteurs journal des messages:

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