Angular Application에 여러 HTTP 인터셉터 추가

Angular Application에 여러 HTTP 인터셉터 추가

Angular 4 애플리케이션에 여러 개의 독립적인 HTTP 인터셉터를 추가하는 방법?

확장하여 추가하려고 했습니다.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 팀은 최근(릴리스 4.3) 다중 인터셉터 개념을 지원하는 새로운 HttpClient 서비스를 추가했습니다.당신은 연장할 필요가 없습니다.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();
  }
}

언급URL : https://stackoverflow.com/questions/45633102/add-multiple-http-interceptors-to-angular-application