How to cancel/abort all pending HTTP requests angular 4+.
There is an unsubscribe
method to cancel HTTP Requests but how to cancel all pending requests all at once.
Especially while route change.
There is one thing I did
ngOnDestroy() {
this.subscription.unsubscribe();
}
but how to achieve this globally
Any Ideas?
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 :