Angular Uygulamaya birden çok HTTP Interceptor ekleyin

Question 1

Bir Angular 4 uygulamasına birden çok, bağımsız HTTP önleyicisi nasıl eklenir?

providersDiziyi birden fazla durdurucu ile genişleterek eklemeye çalıştım . Ancak sadece sonuncusu gerçekten yürütülür, Interceptor1göz ardı edilir.

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

Açıkçası onları tek bir Interceptorsınıfta birleştirebilirim ve bu işe yaramalı. Bununla birlikte, bu durdurucuların tamamen farklı amaçları olduğundan kaçınmak isterim (biri hata işleme için, biri yükleme göstergesini göstermek için).

Öyleyse birden çok durdurucu nasıl ekleyebilirim?

Question 2

Httpbirden fazla özel uygulamaya izin vermez. Ancak @estus'un da belirttiği gibi, Angular ekibi son zamanlarda birden fazla önleme konseptini destekleyen yeni bir HttpClient hizmeti ekledi (sürüm 4.3). Eskisi HttpClientgibi genişletmenize gerek yok Http. Bunun HTTP_INTERCEPTORSyerine şu 'multi: true'seçeneğe sahip bir dizi olabilecek bir uygulama sağlayabilirsiniz :

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

Önleyiciler:

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

Bu sunucu çağrısı, her iki önleyicinin günlük mesajlarını yazdıracaktır:

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