error - Adicione vários interceptores HTTP ao aplicativo angular



intercept http request angular 7 (1)

Http não permite ter mais de uma implementação personalizada. Mas como @estus mencionou a equipe Angular adicionou recentemente um novo serviço angular.io/guide/http (versão 4.3) que suporta múltiplos conceitos de interceptores. Você não precisa estender o HttpClient como faz com o antigo Http . Você pode fornecer uma implementação para HTTP_INTERCEPTORS que pode ser uma matriz com a opção '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 chamada do servidor irá imprimir as mensagens de log de ambos os interceptadores:

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

Como adicionar múltiplos interceptores HTTP independentes a um aplicativo Angular 4?

Eu tentei adicioná-los, estendendo a matriz de providers com mais de um interceptor. Mas somente o último é realmente executado, o Interceptor1 é ignorado.

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

Eu obviamente poderia combiná-los em uma única classe Interceptor e isso deveria funcionar. No entanto, eu gostaria de evitar que esses interceptores tivessem propósitos completamente diferentes (um para manipulação de erros, um para mostrar um indicador de carregamento).

Então, como posso adicionar vários interceptores?