When studying RxJS in Angular, people always mention that
don’t forget to unsubscribe the Observable. Otherwise, it may occur
memory leak issues.
Also, people might feel confuse that should we apply this
rule to the Observable from HttpClient? Most tutorials tell you that it will
be unsubscribed automatically, and you don’t need to worry about it.
Therefore, this note is written for testing HttpClient to
see whether it will be unsubscribed automatically or not.
STEPS:
1. Build a simple template angular project through Angular
CLI
ng new my-app
2. Provide a service for HTTP Request
(You can use some free public web API, then you don’t need to build your back-end service)
(You can use some free public web API, then you don’t need to build your back-end service)
// get Random Image of cat from a free public web API
// The return type is Observable getRandomImage(): Observable{ return this.httpClient.get('https://api.thecatapi.com/v1/images/search'); }
3. Provide an another service for returning our custom observable whose value will be changed constantly
export class MyService { // Variables public myObservalbe$ = new BehaviorSubject(''); private count = 0; // constructor constructor() {
// Keep notify observer for the value change interval(1000).subscribe( next => { this.myObservalbe$.next('hello_world_' + this.count); this.count++; } ); } // return our custom Observable getMyObservable(): Observable { return this.myObservalbe$.asObservable() } }
4. On ‘app.component.ts’, subscribe both observable from
each service we built
// Variablses
httpClietSub = null;
normalSub = null;
// constructor
constructor(
private catImgService: CatImgService,
private myService: MyService,
) { }
// ngOnInit
ngOnInit(): void {
// Subscription from HttpClient
this.httpClietSub = this.catImgService.getRandomImage().subscribe(
next => {
// Do something
},
)
// Subscription from custom Observable
this.normalSub = this.myService.getMyObservable().subscribe(
next => {
// Do something
},
)
// Unsubscribe custom Observable once timer emit an event
timer(5000, 1000).subscribe(
next => {
this.normalSub.unsubscribe();
}
);
}
// this function is bound to HTML button click event
// it will log the 'closed' state of each subscription
onBtnClicked(): void {
console.log('httpClietSub', this.httpClietSub.closed);
console.log('normalSub', this.normalSub.closed);
}
5. Provide a button in ‘app.component.html’ and bind a click
event 'onBtnClicked' to log the ‘closed’ status of both subscription
6. Launch the app, and click the button to see the result in Console
Conclusion:
According to the result from above exp, the ‘closed’ state
of HttpClient Observable will be ‘true’.
On the other hand, before unsubscribing custom observable, the ‘closed’ state of custom observable subscription always show ‘false’, but it will turn into ‘true’ once the timer is triggered to unsubscribe it.
On the other hand, before unsubscribing custom observable, the ‘closed’ state of custom observable subscription always show ‘false’, but it will turn into ‘true’ once the timer is triggered to unsubscribe it.
Therefore, this result prove that we don’t need to worry
about ‘unsubscribe’ for HttpClient Observable because it will be unsubscribed automatically
