Angular，rxjs：使用 flatMap 修复嵌套订阅

Question

我对 Angular 和 rxjs 还很陌生...我写了一些我想重构的代码，因为我一直在读到我所做的恰好是一种反模式：可观察对象的嵌套订阅。

我搜索了互联网上的每个地方以找到解决方案（我希望我没有错过任何东西）并了解我必须做什么但不能适用于我的案例：使用 flatMap 应该可以解决。具体代码如下：

...
observable1$: Observable<any>;
observable2$: Observable<any>;
...

constructor (...) {
...
    this.observable1$ = this.someStore.pipe(select(Selector.selectMyObs1));
    this.observable2$ = this.someStore.pipe(select(Selector.selectMyObs2));
...
}

...
this.observable1$.subscribe(val1 => {
    if (val1.error === false) {
        this.observable2$.subscribe(val2 => {
            this.someArray.push(val2);
        });
    }
});
...

代码以某种方式工作，但我不确定我是幸运还是什么。 我想知道如何使用 flatMap 重写此代码，因为只有在第一个没有检索到任何错误时我才必须进行第二个订阅。

Answer 1

这样怎么样——

this.observable1$
    .pipe(
      mergeMap(val1 => {
        if(val1.error === false) {
          return this.observable2$
                     .pipe(
                       tap(val2 => {
                          this.someArray.push(val2);
                       })
                     );
        }

        return of(null);
      })
    ).subscribe();

它将避免多次订阅。在这里，我们正在编写 observable。