angular - কৌণিক অ্যাপ্লিকেশনটিতে একাধিক এইচটিটিপি ইন্টারসেপ্টর যুক্ত করুন



http interceptor (1)

Http একাধিক কাস্টম বাস্তবায়ন করতে দেয় না। তবে @ ইস্তাসের উল্লেখ হিসাবে কৌণিক দল সম্প্রতি একটি নতুন angular.io/guide/http পরিষেবা যুক্ত করেছে (৪.৩ প্রকাশ করুন) যা একাধিক ইন্টারসেপ্টর ধারণাকে সমর্থন করে। পুরানো HttpClient যেমন করেন HttpClient আপনাকে HttpClient প্রসারিত করার দরকার নেই। পরিবর্তে আপনি 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,
    }
  ],
  ...
})

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

কৌণিক 4 অ্যাপ্লিকেশনটিতে একাধিক, স্বতন্ত্র HTTP ইন্টারসেপ্টরগুলি কীভাবে যুক্ত করবেন?

আমি একাধিক ইন্টারসেপ্টর দিয়ে providers অ্যারে বাড়িয়ে তাদের যুক্ত করার চেষ্টা করেছি। তবে কেবলমাত্র শেষটি কার্যকর করা হয়, Interceptor1 1 উপেক্ষা করা হয়।

@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 শ্রেণিতে সংযুক্ত করতে পারতাম এবং এটি কাজ করা উচিত। তবে আমি এড়াতে চাই যেহেতু এই ইন্টারসেপ্টরগুলির সম্পূর্ণ ভিন্ন উদ্দেশ্য রয়েছে (ত্রুটি পরিচালনা করার জন্য একটি, একটি লোডিং সূচক দেখানোর জন্য))

তাহলে আমি কীভাবে একাধিক ইন্টারসেপ্টর যুক্ত করতে পারি?