如何正确订阅 Angular HttpClient Observable? [英] How to correctly subscribe Angular HttpClient Observable?

问题描述

以 Angular 文档中的 HeroService 为例.

Taking example of HeroService from angular documentation.

下面是 HeroService 中的一个 POST 方法

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

我们可以看到，每次调用 addHero 都会返回一个新的 Observable.

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

好的，现在是 HeroComponent 的服务调用

Ok now here is the service call from HeroComponent

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

现在在我的组件中，这个添加英雄服务调用一个接一个地频繁发生.每个 addHero 调用都返回一个新的 Observable 对象，并且它正在被订阅.

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.

我的问题是在我的用例中订阅此服务的正确方法是什么，其中 addHero 经常被一个接一个地调用 1000 次.

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

除了第二种方法只创建一个 Observable 对象之外，这两种方法有什么区别.还有这两种方法的优缺点是什么.

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 ?

推荐答案

首选这个，因为observable执行后会完成，不能复用.

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

如果您需要在短时间内调用您的服务 1000 次，也许最好调用专用服务进行批量读取.

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

关于内存泄漏.

这是安全的，因为 this.http.post 将返回 Observable，它以成功和错误的任何第一个结果结束.

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

取消订阅是必须

你也应该退订，你可以阅读它此处

Also you should unsubscribe, you can read about it here

这篇关于如何正确订阅 Angular HttpClient Observable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！