如何顺序从两个可观察对象中获取值？答案

【问题标题】：How can I get values from two observables sequentially?如何顺序从两个可观察对象中获取值？
【发布时间】：2020-03-06 02:24:00
【问题描述】：

我是 RxJs 的新手。

我的目的是：（1）进行第一次调用后端并获取值，然后（2）根据返回的值，进行另一个调用后端并将两个值作为数组返回。

当我订阅时，我想同时获得两个值：building 和 buildingUnit。

这是我试图达到这个目的的方式：

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b);
    }
  })
).subscribe((bu: BuildingUnit) => {

});

我希望得到的结果：

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b);
    }
  })
).subscribe((b: Building, bu: BuildingUnit) => {

});

谢谢

【问题讨论】：

这可以使用resultSelector 参数来完成，例如mergeMap。否则，在 migration guide 之后，在内部 observable 上使用 map 运算符来创建包含订阅中需要的属性的对象或数组。

标签： javascript angular rxjs

【解决方案1】：

您可以将第二个值映射到一个数组中。

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => {
    if (b) {
      return this._buildingUnitsService.loadBuildingUnit(b).pipe(
        map(c => [b, c]),
      );
    }
    return of([b]); // or `[b, undefined]` to be more obvious
  })
  .subscribe(([b, c]) => {
    // ...
  })

【讨论】：

【解决方案2】：

您可以使用forkJoin 将这两个值传回：

this._buildingsService.loadBuilding(1).pipe(
  mergeMap((b: Building) => forkJoin({
    b: of(b),
    bu: b ? this._buildingUnitsService.loadBuildingUnit(b) : of(null)
  }))
).subscribe((result: { b: Building, bu: BuildingUnit  }) => {

});

演示：https://stackblitz.com/edit/angular-p5vtej

【讨论】：