Rxjs 一个 Observable 馈入另一个答案

【问题标题】：Rxjs One Observable Feeding into AnotherRxjs 一个 Observable 馈入另一个
【发布时间】：2017-11-19 12:08:18
【问题描述】：

我有一组看起来相当笨重的代码，其中一个 observable 的数据被输入到另一个 observable 中，如下所示：

let source = this.myService.getFoo()
   .subscribe(result => {
      let source2 = this.myService.getMoo(result)
         .subscribe(result2 => { // do stuff });
   });

我知道有多种方法可以组合和链接，但我需要将来自源的数据馈送到 source2。订阅的嵌套看起来很糟糕，我很确定有更好的方法来做到这一点。

谢谢！

【问题讨论】：

如果函数比getFoo 和getMoo 更具描述性那就太好了，因为我是RxJS 的初学者，无法真正掌握这些函数调用应该返回什么，我假设很多人都有同样的问题。

标签： javascript rxjs observable

【解决方案1】：

要将 Observable 发出的项目转换为另一个 Observable，您可能需要使用 flatMap 运算符。它创建了一个内部 Observable 并将其结果扁平化到外部流。

const source = this.myService
    .getFoo()
    .pipe(
        flatMap(result => this.myService.getMoo(result))
     )
    .subscribe(result2 => {
        // do some stuff
    });

以下是一些您可以使用的平面运算符，它们的行为会有所不同：

flatMap/mergeMap - 立即为任何源项目创建一个 Observable，所有以前的 Observable 都保持活动状态
concatMap - 等待前一个 Observable 完成后再创建下一个
switchMap - 对于任何源项，完成前一个 Observable 并立即创建下一个
exhaustMap - 映射到内部 observable，忽略其他值直到 observable 完成

【讨论】：

【解决方案2】：

您可以使用merge 来“合并”两个流，以便将来自两个 Observable 中的任何一个的任何发射发送给观察者：

let source = this.myService.getFoo()
  .merge(this.myService.getMoo(result))
  .subscribe(...);

...或者如果你想在第一个 Observable 发出一个值之后订阅第二个 Observable，你可以使用 mergeMapTo:

let source = this.myService.getFoo()
  .mergeMapTo(this.myService.getMoo(result))
  .subscribe(...);

您可以对 concatMap 执行类似的操作，等待内部 Observable 完成。

但是，这实际上取决于您要实现的目标以及您希望在观察者中获得什么。

【讨论】：

你从哪里得到result？