Додайте кілька перехоплювачів HTTP до Angular Application

Question 1

Як додати кілька незалежних перехоплювачів 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клас, і це мало б спрацювати. Однак я хотів би уникнути цього, оскільки ці перехоплювачі мають зовсім інші цілі (один для обробки помилок, інший для показу індикатора завантаження).

То як я можу додати кілька перехоплювачів?

Question 2

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