Angular Uygulamaya birden çok HTTP Interceptor ekleyin


86

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?


2
Sen ağır basıyorsun Http. Yalnızca son geçersiz kılma kullanılır. Interceptor1 göz ardı edilmez, sadece yoktur. Önleyiciler içeren HttpClient'i kullanabilirsiniz.
Estus Flask

@estus "Önleyiciler içeren HttpClient'i kullanabilirsiniz." derken neyi kastediyorsunuz?
str


Kullandığınız istek, tepki için farklı önleyicilerin kullanabilirsiniz bu hata işlemeyi, yükleyici göstergesini yapabileceği ile.
nivas

Bu soruda herhangi bir güncelleme var mı?
Renil Babu

Yanıtlar:


164

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

4
apiAramanın yalnızca bir kişi tarafından kesilebileceğini söylemenin bir yolu var mı interceptor? veya herhangi bir koşulla?
k11k2

@ k11k2 ve arayan herkes için, işte bununla ilgili bir soru ve cevap: stackoverflow.com/questions/45781379/… Kabul ediyorum, hala biraz kafam karıştı.
trollkotze

Neden @ Enjekte Edilebilir () olmak zorunda? Benim için @ Enjekte edilebilir () olmadan çalışıyor
makkasi

1
@makkasi: Interceptor sınıfının kendi bağımlılık enjeksiyonunu yapması gerekiyorsa @ Injectable eklemeniz gerekir. Verilen örnekte, bu gerekli değildir
jintoppy

1
@ AmirReza-Farahlagha Durdurucular, verildikleri sıraya göre çağrılır
hiper2d
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.