How to cancel/unsubscribe all pending HTTP requests in Angular 4+

by

Checkout the takeUntil() operator from RxJS to globally drop your subscriptions :

– RxJS 6+ (using the pipe syntax)

import { takeUntil } from 'rxjs/operators';

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

   [...]

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

   public ngOnDestroy(): void {
       // This aborts all HTTP requests.
       this.ngUnsubscribe.next();
       // This completes the subject properlly.
       this.ngUnsubscribe.complete();
   }
}

– RxJS < 6

import 'rxjs/add/operator/takeUntil'

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

You can basically emit an event on your unsubscribe Subject using next() everytime you want to complete a bunch of streams. It is also good practice to unsubscribe to active Observables as the component is destroyed, to avoid memory leaks.

Worth reading :

More Related Contents:

  1. What is the difference between Subject and BehaviorSubject?
  2. How to make a sequence of http requests in Angular 6 using RxJS
  3. Angular subscribe elegant
  4. Best way to import Observable from rxjs
  5. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  6. Behaviour subject initial value null?
  7. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  8. Rxjs Retry with Delay function
  9. Subscribing to a nested Observable
  10. What is pipe for in RxJS?
  11. How to throw error from RxJS map operator (angular)
  12. How to return observable from subscribe
  13. Property ‘toPromise’ does not exist on type ‘Observable’
  14. How to return value inside subscribe Angular 4
  15. How to mock Angular 4.3 httpClient an error response in testing
  16. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  17. How to pass results between chained observables
  18. How do I create a singleton service in Angular 2?
  19. How can I unit test a component that uses the Router in Angular?
  20. localStorage is not defined (Angular Universal)
  21. Angular 6: saving data to local storage
  22. Pass config data using forRoot
  23. How to make an http call every 2 minutes with RXJS?
  24. Debug & Run Angular2 Typescript with Visual Studio Code?
  25. Angular @ViewChild() error: Expected 2 arguments, but got 1
  26. Ionic2/Angular2 – Read a custom config file
  27. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  28. FormBuilder group is deprecated
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment