链接多个可观察对象并重用链中已执行的结果

Question

我想结合以下函数a() 、 b()和c()来获得一个结果。

function a() {
    return rx.of(42);
}

function b(value) {
    return rx.of(value*2);
}

function c(val1, val2) {
    return rx.of({
        original: val1,
        modified: val2
    })
}

这些是简化的变体——它们实际上是 HTTP 请求。 执行b a a b的结果是执行c的前提条件。 我唯一能想到的就是将它们全部包装在.subscribe()调用中，但这看起来并不正确。 但是我想不出更好的方法来解决这个问题：

// bad
new Observable(observer => {
    a().subscribe(
        result_a => {
            b(result_a).subscribe(
                result_b => {
                    c(result_a, result_b).subscribe(
                        result_c => {
                            observer.next(c);
                        }
                    )
                }
            )
        }
    )    
}).subscribe(
    result => console.log(result)
)

我确实知道有诸如pipe 、 concat等运算符，但我不知道如何在这种特定情况下应用它们，其中一个Observable的结果仍然需要稍后执行的另一个 Observable 的结果。 我怎样才能通过使用正确的 RxJS 技术来简化这一点？

Answer 1

你可以尝试的是这样的，评论是内联添加的

a().pipe(
  // concatMap ensures that the order of notification is maintained, i.e. a() emits its next value only after b() has finished processing the previous one
  concatMap(valA => b(valA).pipe(
    // via this map we can return both the result of b() and also the parameter received, i.e. the result of a()
    map(valB => {
       return {valA, valB}
    })
  ),
  // here again, with concatMap, we ensure the order of notification is maintained
  concatMap(({valA, valB}) => c(valA, valB))
)

这是在将 RxJS 与 http 一起使用时可能会多次遇到的典型模式。

如果你想看到更多这样的模式，你可以阅读这篇文章。

Answer 2

与您的示例直接等效的是mergeMap ：

a().pipe(
  mergeMap(a =>
    b(a).pipe(
      mergeMap(b => c(a, b))
    )
  )
)
.subscribe(console.log)

如果顺序很重要（一旦这些是异步的，而不仅仅是用of制作的），那么您将希望使用concatMap代替。 但整体结构是一样的。

Answer 3

鉴于a和b可观察对象已完成，您可以像这样使用forkJoin运算符：

 const { of, forkJoin } = rxjs; const { mergeMap } = rxjs.operators; function a() { return of(42); } function b(value) { return of(value*2); } function c(val1, val2) { return of({ original: val1, modified: val2 }) } const init = a(); forkJoin( init, init.pipe(mergeMap(b)) ).pipe(mergeMap(([a, b]) => c(a, b))).subscribe(console.log);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>