angular - 我在嵌套两个服务时遇到问题

Question

第一个返回一个对象数组。每个对象都有一个唯一的用户 ID，我需要它来调用第二个服务。

this._vendorService.getAllPickupLoc().subscribe(val => {
  val.forEach(element => {
    this.finalObject = element;
    this._vendorService.getVendorUserInfo(element.id).subscribe(res => {
      this.finalObject["userInfo"] = res;
      this.finalArray.push(this.finalObject);
    });
  });
});

虽然它工作正常，但上面的代码有两个缺点。1. 它开始看起来像回调地狱。2.我必须自己处理每个订阅的处置。

Answer 1

您可以使用 RxJS 运算符将它们链接在一起：

this._vendorService.getAllPickupLoc().pipe(
  // emit each element in order
  mergeMap(elements => from(elements)),
  // subscribe to inner Observable for each element and emit result
  mergeMap(element => this._vendorService.getVendorUserInfo(element.id)),
  // handle info
  tap(userInfo => {
    this.finalObject["userInfo"] = res;
    this.finalArray.push(this.finalObject);
  })
).subscribe();

根据其余代码的结构，您甚至可以摆脱tap和简单地map每次发射并添加toArray以将最终结果作为数组发射。