Cancel pending http requests in Angular 4/Ionic 3

Question

We have an app that pulls users schedules on a per day basis. They can side scroll through days and on each scroll stop it fires the http.get and grabs the schedule for that day.

The problem we have run into is people scrolling, lifting their finger and continuing scrolling. We implemented a timeout so there is a delay between slide stop and the request firing, but we can't make that too long and still a number of http.get requests are fired.

I need a way to cancel any pending HTTP requests on the start of a new one.

slideStop() {
   ..gather date information and other relevant parameters..

   <stop any pending HTTP requests>

   this.http.get()
}

Check this https://stackoverflow.com/questions/36490926/how-to-cancel-a-httprequest-in-angular-2 about unsubscribe from HTTP — Amr Eladawy, May 18 '17 at 20:34

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

If you use switchMap on an observable, it will cancel any pending requests when you re-use this observable as mentioned in the documentation (https://angular.io/docs/ts/latest/guide/router.html#activatedroute-the-one-stop-shop-for-route-information)

The switchMap operator allows you to perform an action with the current value of the Observable, and map it to a new Observable. As with many rxjs operators, switchMap handles an Observable as well as a Promise to retrieve the value they emit.

The switchMap operator will also cancel any in-flight requests if the user re-navigates to the route while still retrieving a hero.

Cancel pending http requests in Angular 4/Ionic 3

1 Answers1