कोणीय अनुप्रयोग में कई HTTP अवरोधक जोड़ें

Question 1

एक कोणीय 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वर्ग में जोड़ सकता था और उसे काम करना चाहिए। हालाँकि, मैं इससे बचना चाहूंगा क्योंकि इन इंटरसेप्टर के पास पूरी तरह से अलग उद्देश्य (त्रुटि से निपटने के लिए, लोडिंग संकेतक दिखाने के लिए एक) है।

तो मैं कई इंटरसेप्टर कैसे जोड़ सकता हूं?

Question 2

Httpएक से अधिक कस्टम कार्यान्वयन करने की अनुमति नहीं देता है। लेकिन जैसा कि @estus ने उल्लेख किया है कि कोणीय टीम ने हाल ही में एक नई 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();
  }
}