How to cancel requests incase of triggering them using forkJoin Rxjs , Angular

Question

I have a set of 6 http get requests which I have to make irrespective of their sequence on a button click.I am using forkJoin for that purpose

<button click="getData()">Get Data</button>


getData(){

  const ids = [1,2,3,4,5,6];

  const obs = ids.map(id => this.http.get('<my url>/' + id)

  forkJoin(...obs).subscribe(res => console.log(res));

}

If a user clicks on the button multiple time, is there a way I could cancel previous uncompleted requests and only make new fresh calls to the backend ?

I did some research and understood switchMap operator helps in cancelling requests but I am not sure how I would be using it here.

Please help

Can't you just disable the button until the old request are done? — Tim567, May 29 '20 at 13:46
Have you thought about disabling the button while the request is in-progress? — Damien, May 29 '20 at 13:46
@Tim567 Yes that can be done but wanted to know how I can cancel previously hit request and trigger new calls — Shijil Narayanan, May 29 '20 at 13:47
The above code is just to demonstrate my problem, its actually a carousel with next and previous button, I cannot disable next button in the carousel when user clicks on it and wait un till all 6 requests are completed, — Shijil Narayanan, May 29 '20 at 13:49
See answers here - https://stackoverflow.com/questions/46068908/how-to-cancel-unsubscribe-all-pending-http-requests-angular-4 — Damien, May 29 '20 at 13:50

Aakash Garg · Accepted Answer · 2020-05-29T13:51:44.150

2

public subscription: Subscription;

getData(){

  const ids = [1,2,3,4,5,6];

  const obs = ids.map(id => this.http.get('<my url>/' + id)

  if(this.subscription){
     this.subscription.unsubscribe();
  }

  this.subscription = forkJoin(...obs).subscribe(res =>console.log(res))
}

edited May 29 '20 at 13:51

answered May 29 '20 at 13:49

Aakash Garg

10,649
2
7
25

what is this.process ? – Shijil Narayanan May 29 '20 at 13:50
This is a good idea. But doesn't this cancel the existing requests and send a new one on keypress, instead of cancelling the new and keeping the old one? – Gauri Kesava Kumar May 29 '20 at 13:57
he said he wanted to discard old request and only cater new one in the question, if he wanted old one, i would have given him solution of exhaustmap. – Aakash Garg May 29 '20 at 13:59

Gauri Kesava Kumar · Answer 2 · 2020-05-29T13:51:51.570

0

I think, the operator you are looking for is ExhaustMap

The older version of ExhaustMap is the flatMapFirst() operator which propagates data from the first mapped observable, and it only goes to the next when it finishes discarding all the other observables before finishing.

edited May 29 '20 at 13:51

answered May 29 '20 at 13:50

Gauri Kesava Kumar

466
2
15

it would be great if you could help me with how to use it with forkJoin – Shijil Narayanan May 29 '20 at 13:51

score 0 · Answer 3 · answered May 29 '20 at 13:51

0

As this answer states:

Most of the jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object, so you can just use abort().

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    success: function(msg){
       alert("Done");
    }
});

//kill the request
xhr.abort()

answered May 29 '20 at 13:51

Tim567

775
1
5
22

This is a traditonal javascript way to abort a request, I am more looking for a rxjs way, anyway thanks for answering :) – Shijil Narayanan May 29 '20 at 13:55

How to cancel requests incase of triggering them using forkJoin Rxjs , Angular

3 Answers3