How to correctly subscribe Angular HttpClient Observable?

Question

Taking example of HeroService from angular documentation.

Below is a POST method in HeroService

addHero (hero: Hero): Observable<Hero> {
    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
           .pipe(
            catchError(this.handleError('addHero', hero))
            );
   }

We can see that every time addHero is called a new Observable is returned.

Ok now here is the service call from HeroComponent

this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));

Now In my component this add hero service call is happening very frequently one after another. Each addHero call is returning a new Object of Observable and it is being subscribed.

My question is what is the correct way of subscribing to this service in my use case where addHero is frequently being called one after another 1000 of times.

I should be calling the hero service like this

addHero(){
  this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));
}

Or I should call the hero service like this, so that only one observable object is created for each call

const req = this.heroesService.addHero(newHero);

addHero(){
  req.subscribe(hero => this.heroes.push(hero));
}

What is the difference between both approaches apart from that only one object of Observable is created in second approach. Also what are the disadvantages or advantages of both the approaches.

For my scenario which is the correct implementation ? Does the second approach makes any difference ? What will happen in terms of memory leak if I go with the first approach ?

Radik · Answer 1 · 2020-04-22T13:20:38.347

0

This one is preferred because after execution observable will be completed and you can't reuse it.

addHero(){
  this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));
}

In case you need call your service 1000 time in short time maybe it will be better call dedicated service for bulk read.

About memory leaks.

It is safe because this.http.post will return Observable which complete with any first result for success and for error.

Unsubscribing is a MUST

Also you should unsubscribe, you can read about it here

edited Apr 22 '20 at 13:20

answered Apr 21 '20 at 22:04

Radik

2,715
1
19
24

I am not talking about unsubscribing here ! All I am saying is no of objects created in first approach. In second approach only 1 object of observable is created and on that object subscribe is called multiple times ! Where is in 1st approach each time add function is called a new object of observable is created and on that object subscribe is called ! I hope you getting my point @Radik – Nitish Kumar Apr 22 '20 at 11:53
this.http.post give you observable and you can keep it as long as you need, but it is not reusable. once you subscribe it will run query. so the second example looks not right way. – Radik Apr 22 '20 at 13:10
So in the second example if I call subscribe on the req object it will not run the query since it has already run once and completed the subscription ? @Radik – Nitish Kumar Apr 22 '20 at 13:26
@NitishKumar i read some docs to be more clear. you can use both approach because each time you subscribe it just return a new producer – Radik Apr 22 '20 at 19:00

score 0 · Answer 2 · answered Apr 21 '20 at 23:25

0

HttpClient calls complete internally after a request has completed so you wouldn't have to deal with memory leaks and manual unsubscibing.

Both of your examples do the same thing but the first one is more readable.

answered Apr 21 '20 at 23:25

Raimo Johanson

246
2
6

Not talking about unsubscibing here ! – Nitish Kumar Apr 22 '20 at 11:54

How to correctly subscribe Angular HttpClient Observable?

2 Answers2

Linked