如何使用 RxJS 运算符实现多个嵌套且相互依赖的订阅？

Question

我有嵌套的订阅，我想使用合适的 RxJS operator. I have already tried concatMap and mergeMap 摆脱它，不幸的是我无法解决我的问题。

我有 3 个相互依赖的订阅，并在 forEach 循环中为当前循环的每个值触发一个新的可观察对象。为了更详细地说明这一点，这是我的示例代码：

this.subscriptionOne = this.serviceOne.getStreets().subscribe((streets) => {
  streets.forEach((street) => {
    this.subscriptionTwo = this.serviceTwo.getMetaData(street.id).subscribe((metaDatas) => {
      metaDatas.forEach((md) => {
        // do some stuff and then trigger another observable..
        this.subscriptionThree = this.serviceTwo.getStuff(md.id, md.type, md.name).subscribe((stuff) => {
          // do some other stuff
        });
      });
    });
  });
});

我怎样才能摆脱这种与 RxJs 的嵌套？

Answer 1

let sub = this.serviceOne
  .getStreets()
  .pipe(
    mergeMap(streets => {
      return from(streets);
    }),
    mergeMap(street => {
      return this.serviceTwo.getMetaData(street.id);
    }),
    mergeMap(metaDatas => {
      return from(metaDatas);
    }),
    mergeMap(md => {
      return this.serviceTwo.getStuff(md.id, md.type, md.name);
    }),
    map(stuff => {
      // do your stuff
    })
  )
  .subscribe();

metaDatas在最后两个运算符中可用：

let sub = this.serviceOne
  .getStreets()
  .pipe(
    mergeMap(streets => {
      return from(streets);
    }),
    mergeMap(street => {
      return this.serviceTwo.getMetaData(street.id);
    }),
    mergeMap(metaDatas => {
      return from(metaDatas).pipe(
        mergeMap(md => {
          return this.serviceTwo.getStuff(md.id, md.type, md.name);
        }),
        map(stuff => {
          // do your stuff
        })
      );
    })
  )
  .subscribe();

如何使用 RxJS 运算符实现多个嵌套且相互依赖的订阅？

How to implement several nested and interdependent subscriptions with RxJS operators?

observable

rxjs

typescript

angular

rxjs6