来自Angular中的嵌套订阅的错误

Question

I am trying nest subscriptions within "subscribe" as some data depends on the response of the previous subscription. (Data flows down the subscription chain till it is stored in an array)

I have an array of IDs, I call a service to convert those IDs to Objects. Code looks like this:

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

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

These Objects are then passed to get a config file for the Obj. Code looks like this:

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

Lastly, this object is passed its config to a final subscription, where a price object is appended to the object, and the object is then pushed to an array of objects (and is then rendered on the screen.) Code looks like this:

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

I don't understand subscribe/observables enough to understand the cause of this bug that I am experiencing. Essentially, I am using subscribe to extract the value of the response. The expected behavior is for this chain to be run as many times as the number of ids I have in my idArray, however, it appears that some subscriptions (or functions) are being run again. I have no errors in the console, my only indicator is the number of items int he final array "objs".

I have tried adding ".first()" or ".take(1)" before ".subscribe" on all my functions and this appears to have fixed duplicate obj objects in my objs array, however they all had the same "price" object.

What am I doing wrong with observables that is causing this to happen?

Answer 1

Your issue could be caused by a strangely-expected behavior of subscribing to the same Observable more than once. I ran into this issue when i was caching API responses through my service.

The idea is that when you subscribe to an observable a second time, the value is retrieved again (It's a "hot" observable), so the first subscription also receives the new (or same) value, thus your next layer of functions are being called twice (or more depending on how many subscribers there are).

You can easily fix this by adding .share() to the end of your observable wherever it's being created. For example, here's a snippet of a code in my current project:

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

return resp;

A good explanation that really helped it click for me is here: https://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html

You've mentioned that this change caused your end objects to be null. I'm not sure if that's caused by some issue in the code. I'll keep this solution posted because it is what worked for me in your case.

(I was doing the same thing - exactly three levels of subscriptions - but the results were fine after adding .share in my case.)