How to cancel in flight pending http api calls?

Question

I have a button on my web page on pressing which an http api call is made. It takes some time to get the response and reflect in the page. So is there a way to cancel in flight pending http requests to avoid multiple api calls in case the user presses it multiple time which may result in inconsistent data?

I thought of doing that but it's a date picker and sometimes for large date ranges can take quite some time to load the data. So felt it's better to override and cancel previous requests. — SanDash, Jul 08 '20 at 12:26

micronyks · Accepted Answer · 2020-07-08T12:54:38.457

Have you ever considered a scenario where you are not allowed to disable the button.

Q. So what happens next ?
A. User is still allowed to press the button.

But in such scenario, you don't want to make the second call (considering first API call is yet not complete). exhaustMap automatically cancels the second call if first call is in progress. That's the beauty of exhaustMap.

For such scenarion exhaustMap from RXJS is useful.

Read this nice article to understand it further

Dummy Code

fromEvent(this.saveButton.nativeElement, 'click')
    .pipe(
        exhaustMap(() => this.saveCourse(this.form.value))
    )
    .subscribe();

OR switchMap could be handy where you have one request to go and suddenly second request comes, so it will cancel out the first request and start the process for second one.

fromEvent(this.saveButton.nativeElement, 'click')
        .pipe(
            swtichMap(() => this.saveCourse(this.form.value))
        )
        .subscribe();

It depends on the scenario that is applicable for your application.

Yes, can't disable the search button. But the requirement is to override the first api call and cancel it and make the second call instead. Example the button is a drop down, the ui will change and same should reflect with the api response. I came across something called switchMap in RxJS which could be more applicable in my case. — SanDash, Jul 08 '20 at 12:48

score 1 · Answer 2 · answered Jul 08 '20 at 12:27

1

create attribute for button disabled .

isDisabled:boolean=false;

when click it change to true

this.isDisabled=true;

after u got data in subscribe change again to false

this.isDisabled=false;

in html bind it to button

[disabled]="isDisabled"

answered Jul 08 '20 at 12:27

mr. pc_coder

16,412
3
32
54

Thanks for this answer. I have already tried this approach but the api calls can take quite some time to load. While this is one way, is there a specific solution of how I mentioned possible? – SanDash Jul 08 '20 at 12:31

score 0 · Answer 3 · answered Jul 08 '20 at 12:32

You can unsubscribe from the request:

@Component({ /* ... */ })
export class AppComponent {
  /* ... */
  private request;

  search() {
    if(request){
        request.unsubscribe();
    }

    this.request = this.searchService.search(this.searchField.value)
      .subscribe(
          //...
      );
  }
}

How to cancel in flight pending http api calls?

3 Answers3