webentwicklung-frage-antwort-db.com.de

Fügen Sie Angular Application 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 Array providers mit mehr als einem Interceptor erweitert habe. Aber nur der letzte wird tatsächlich ausgeführt, Interceptor1 wird 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 einzelnen Klasse Interceptor zusammenfassen, und das sollte funktionieren. Ich möchte jedoch vermeiden, dass diese Abfangjäger völlig unterschiedliche Zwecke haben (einen zur Fehlerbehandlung, einen zur Anzeige eines Ladeanzeigers).

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

63
str

Http erlaubt nicht mehr als eine benutzerdefinierte Implementierung. Aber wie @estus bereits erwähnte, hat das Angular= Team kürzlich einen neuen HttpClient - Dienst hinzugefügt (Release 4.3), der das Konzept mehrerer Interceptors unterstützt. Sie müssen das HttpClient wie bei der alten Http. Sie können stattdessen eine Implementierung für HTTP_INTERCEPTORS Bereitstellen, die ein Array mit der Option 'multi: true' Sein kann:

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 gibt die Protokollmeldungen beider Interceptors aus:

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