This content originally appeared on DEV Community and was authored by MD ASHRAF
To cancel an ongoing HTTP request when a component is destroyed, you can use the following techniques:
- Using
takeUntiloperator:
import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-example',
template: '<p>Example Component</p>',
})
export class ExampleComponent implements OnDestroy {
private ngUnsubscribe = new Subject<void>();
constructor(private http: HttpClient) {
this.http.get('https://api.example.com/data') // making http call
.pipe(takeUntil(this.ngUnsubscribe)) // will subscribe to observanle until "ngUnsubscribe" is complete
.subscribe((response) => {
console.log(response);
});
}
ngOnDestroy(): void {
//marking ngUnsubscribe observable complete will unsubscribe the observable and request will get cancelled.
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
2.Using Subscription object
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-example',
template: '<p>Example Component</p>',
})
export class ExampleComponent implements OnDestroy {
private subscription: Subscription;
constructor(private http: HttpClient) {
this.subscription = this.http.get('https://api.example.com/data')
.subscribe((response) => {
console.log(response);
});
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
However this approach is good for a single subscription if we have (n) subscriptions and we want to cancel all on component destroy(which is good practice), follow solution 1.
Why is it important?
Canceling ongoing HTTP requests when a component is destroyed is important to prevent memory leaks and improve the overall performance of your application. When a component is destroyed, any ongoing HTTP requests associated with that component should be cancelled to prevent unnecessary resource usage and potential errors.
📌📌 More Angular related topics here:
Rxjs and Angular bonding
This content originally appeared on DEV Community and was authored by MD ASHRAF
MD ASHRAF | Sciencx (2025-07-01T14:30:00+00:00) Cancelling HTTP request when Angular Component destroyed. Retrieved from https://www.scien.cx/2025/07/01/cancelling-http-request-when-angular-component-destroyed/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.