javascript - Angular 中嵌套订阅的错误

Question

我正在尝试在“订阅”中嵌套订阅，因为某些数据取决于先前订阅的响应。 (数据沿着订阅链流动，直到存储在数组中)

我有一个 ID 数组，我调用一个服务将这些 ID 转换为对象。代码如下所示:

idArray.forEach(id =>
     this.getObjByID(id)));
}

getOjByID(ID: number): void {
  this._APIService.getObjByID(ID).subscribe(
    obj => {
        this.getDefaultConfig(obj);
    });
}

然后传递这些对象以获取该对象的配置文件。代码如下所示:

  getDefaultConfig(obj: any): void {
      this._APIService.getDefaultConfig(obj.id).subscribe(
          res => {
              obj.config = res;
              this.getPrices(obj);
          });
  }

最后，该对象将其配置传递给最终订阅，其中价格对象被附加到该对象，然后该对象被推送到对象数组(然后呈现在屏幕上)。代码如下这个:

  getPrices(obj: any): void {
      this._PriceService.getPrice(obj).subscribe(
          res => {
              obj.price = res;
              this.objs.push(obj);
          });
  }

我对订阅/可观察对象的理解不够深入，无法理解我遇到的这个错误的原因。本质上，我使用 subscribe 来提取响应的值。预期的行为是该链运行的次数与 idArray 中 id 的数量相同，但是，似乎某些订阅(或函数)正在再次运行。我在控制台中没有错误，我唯一的指标是最终数组“objs”中的项目数。

我尝试在所有函数的“.subscribe”之前添加“.first()”或“.take(1)”，这似乎在我的 objs 数组中修复了重复的 obj 对象，但是它们都有相同的“价格”对象。

我对可观察量做错了什么导致这种情况发生？

Answer 1

您的问题可能是由于多次订阅同一个 Observable 的奇怪预期行为引起的。当我通过我的服务缓存 API 响应时，我遇到了这个问题。

这个想法是，当您第二次订阅一个可观察量时，会再次检索该值(这是一个“热门”可观察量)，因此第一次订阅也会收到新的(或相同的)值，因此您的下一层函数被调用两次(或更多，具体取决于有多少订阅者)。

您可以通过将 .share() 添加到您的可观察对象的末尾(无论它是在哪里创建的)来轻松解决此问题。例如，这是我当前项目中的代码片段:

const resp = this.http.get(url)
  .map( /* Some stuff is done and a value is returned */ )
  .catch(this.handleError)
  .share();

return resp;

这里有一个真正帮助我点击的很好的解释: https://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html

您提到此更改导致您的最终对象为空。我不确定这是否是由代码中的某些问题引起的。我会发布这个解决方案，因为它对我来说对您的案例有用。

(我做了同样的事情 - 恰好三个级别的订阅 - 但在我的例子中添加 .share 后结果很好。)