कोणीय अनुप्रयोग

Question

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

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

Answer 1

Http एक से अधिक कस्टम कार्यान्वयन की अनुमति नहीं देता है। लेकिन जैसा कि @estus ने एंगुलर टीम का उल्लेख किया है, हाल ही में एक नया HttpClient सेवा जोड़ा गया है (रिलीज 4.3) जो एकाधिक इंटरसेप्टर अवधारणा का समर्थन करता है। पुराने Http के साथ आपको HttpClient का विस्तार करने की आवश्यकता नहीं है।

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

Interceptors:

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

आप जो 'multi: true' विकल्प के साथ एक सरणी हो सकता है HTTP_INTERCEPTORS बजाय के लिए एक कार्यान्वयन प्रदान कर सकते हैं