Fügen Sie der Angular-Anwendung mehrere HTTP-Interceptors hinzu

Wie füge ich einer Angular 4-Anwendung mehrere unabhängige HTTP-Interceptors hinzu?

Ich habe versucht, sie hinzuzufügen, indem ich das providersArray mit mehr als einem Interceptor erweitert habe. Aber nur der letzte wird tatsächlich ausgeführt, Interceptor1wird ignoriert.

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

Ich könnte sie natürlich zu einer InterceptorKlasse zusammenfassen und das sollte funktionieren. Ich möchte dies jedoch vermeiden, da diese Abfangjäger völlig unterschiedliche Zwecke haben (einen zur Fehlerbehandlung, einen zur Anzeige eines Ladeindikators).

Wie kann ich also mehrere Abfangjäger hinzufügen?

Httperlaubt nicht mehr als eine benutzerdefinierte Implementierung. Wie @estus bereits erwähnte, hat das Angular-Team kürzlich einen neuen HttpClient- Dienst hinzugefügt (Version 4.3), der das Konzept mehrerer Interceptors unterstützt. Sie müssen das nicht HttpClientwie beim alten erweitern Http. Sie können HTTP_INTERCEPTORSstattdessen eine Implementierung für ein Array mit der folgenden 'multi: true'Option bereitstellen :

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

Abfangjäger:

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

Dieser Serveraufruf druckt die Protokollnachrichten beider Abfangjäger:

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