เพิ่ม HTTP Interceptors หลายตัวใน Angular Application

จะเพิ่มตัวดักจับ HTTP อิสระหลายตัวลงในแอปพลิเคชัน Angular 4 ได้อย่างไร

ฉันพยายามเพิ่มโดยขยายprovidersอาร์เรย์ที่มีตัวสกัดกั้นมากกว่าหนึ่งตัว แต่สุดท้ายเท่านั้นที่ถูกดำเนินการจริงInterceptor1จะถูกละเว้น

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

เห็นได้ชัดว่าฉันสามารถรวมเข้าเป็นInterceptorชั้นเรียนเดียวได้และน่าจะได้ผล อย่างไรก็ตามฉันต้องการหลีกเลี่ยงเนื่องจากตัวดักจับเหล่านี้มีจุดประสงค์ที่แตกต่างกันโดยสิ้นเชิง (อันหนึ่งสำหรับการจัดการข้อผิดพลาดอันหนึ่งเพื่อแสดงตัวบ่งชี้การโหลด)

ฉันจะเพิ่มตัวดักจับหลายตัวได้อย่างไร

Httpไม่อนุญาตให้มีการใช้งานแบบกำหนดเองมากกว่าหนึ่งรายการ แต่อย่างที่ @estus กล่าวถึงทีม Angular ได้เพิ่มบริการHttpClientใหม่เมื่อเร็ว ๆ นี้ (รุ่น 4.3) ซึ่งรองรับแนวคิดตัวสกัดกั้นหลายตัว คุณไม่จำเป็นที่จะขยายที่คุณทำกับเก่าHttpClient Httpคุณสามารถจัดเตรียมการใช้งานHTTP_INTERCEPTORSแทนซึ่งสามารถเป็นอาร์เรย์ด้วย'multi: true'ตัวเลือก:

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

ตัวสกัดกั้น:

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