如何在 Angular 2 的服务中取消预览未完成的相同类型的 HTTP 请求？

Question

I'm using Angular 9 in my web app. I'm using a lot of services to connect to a web service. Sometimes a lot of identical requests are sent to a service. Maybe when a user click on a button repeatedly.

I want to cancel previews incomplete requests for all of my services. What's the best solution? (Maybe using RXJS)

This is one of my service functions:

constructor(private http: HttpClient) {}

getList(options?: ApiListOptions) {
  return this.http.post<ApiResponse<UserGet[]>>(
    environment.apiRoot + 'user/list',
    options,
    { headers: this.headers() }
  );
}

Thanks

Answer 1

Please try below with takeUntil rxjs operator you will be able to do the same.

export class YourComponent {
   protected ngUnsubscribe: Subject<void> = new Subject<void>();

   [...]

   public httpGet(): void {
      this.http.get()
         .takeUntil(this.ngUnsubscribe)
         .subscribe( (data) => { ... })
   }

   public ngOnDestroy(): void {
       this.ngUnsubscribe.next();
       this.ngUnsubscribe.complete();
   }
}

Answer 2

For your specific case, like frequent button clicks, you can use switchMap() combine with debounceTime() to limit the frequency of action and http calls. You can use Subject for action trigger instead of component method

<button click="getList.next()">click</button>

getList=new Subject()
getList.pipe(debounceTime(2000),switchMap(()=>
this.http.post<ApiResponse<UserGet[]>>(
    environment.apiRoot + 'user/list',
    options,
    { headers: this.headers() }
  );
)).subscribe()