navigationend - router events subscribe angular 4

Agregue múltiples interceptores HTTP a la aplicación angular

Question

¿Cómo agregar múltiples interceptores HTTP independientes a una aplicación Angular 4?

Traté de agregarlos ampliando la matriz de providers con más de un interceptor. Pero solo se ejecuta el último, se ignora 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 {}

Obviamente podría combinarlos en una sola clase de Interceptor y eso debería funcionar. Sin embargo, me gustaría evitar eso, ya que estos interceptores tienen propósitos completamente diferentes (uno para el manejo de errores, uno para mostrar un indicador de carga).

Entonces, ¿cómo puedo agregar múltiples interceptores?

Answer 1

Http no permite tener más de una implementación personalizada. Pero como @estus mencionó, el equipo de Angular ha agregado recientemente un nuevo servicio angular.io/guide/http (versión 4.3) que admite el concepto de múltiples interceptores. No necesita extender el HttpClient como lo hace con el viejo Http . En su lugar, puede proporcionar una implementación para HTTP_INTERCEPTORS que puede ser una matriz con la opción ''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,
    }
  ],
  ...
})

Interceptores:

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

Esta llamada al servidor imprimirá los mensajes de registro de ambos interceptores:

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