Açısal Uygulamaya Çoklu HTTP Interceptors Ekleme

Question

Angular 4 uygulamasına çoklu, bağımsız HTTP interceptors nasıl eklenir?

Birden fazla önleyici ile providers dizisini genişleterek bunları eklemeyi denedim. Ancak sadece sonuncusu yürütülür, Interceptor1 gö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ı tek Interceptor sınıfa bunları birleştirmek olabilir ve bu çalışmalıdır. Bununla birlikte, bu engelleyicilerin tamamen farklı amaçlara sahip olmasından (hata işleme, biri yükleme göstergesini göstermek için) sahip olmaktan kaçınmak isterim.

Birden çok önleyici nasıl ekleyebilirim?

Answer 1

Http, birden fazla özel uygulamaya sahip olmasına izin vermez. Fakat @estus'un belirttiği gibi, açısal ekip yakın zamanda yeni bir HttpClient hizmetini ekledi (sürüm 4.3), çoklu önleyici konseptini destekliyor. HttpClient'u eski Http ile yaptığınız gibi genişletmeniz gerekmez.

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

Müdahale: Bu sunucu çağrısı hem Interceptors' günlük iletilerini yazdırır

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

:

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

Sen 'multi: true' seçeneği bulunan bir dizi olabilir yerine HTTP_INTERCEPTORS için bir uygulama sağlayabilir