如何将 RxJS-Stream 拆分为多个独立的流

Question

我有以下用例。 当我在 ngOnInit 中打开我的 angular 组件时，我订阅了路由解析器（this.activatedRoute.data）的可观察对象。 一旦发出数据，我就不会启动多个应该彼此独立运行和完成的 http 请求。 由于嵌套订阅是一种反模式，我考虑将 switchMap 与 forkJoin 结合使用。 到目前为止，这工作正常，只是它仅在所有 http 请求完成后才完成。 但由于这些请求是 100% 独立的，我更愿意在每次请求之一完成时更新我的​​ ui。 如何在不嵌套订阅的情况下执行此操作？

这是我目前的实现。

this.activatedRoute.data.pipe(
    switchMap(data => {
      return forkJoin(
        httpRequest1(data),
        httpRequest2(data),
        )
    })
).subscribe((res)=>{
    this.list1 = res[0];
    this.list2 = res[1];
})

Answer 1

只需使用合并（通过将多个 Observable 的值混合到一个 Observable 中，将它们拼合在一起），如下所示：

this.activatedRoute.data
  .pipe(
    switchMap(data => {
      return merge(
        httpRequest1(data).pipe(tap(x => updateUI1(x))),
        httpRequest2(data).pipe(tap(x => updateUI2(x))),
      )
    })
  )

Answer 2

仅供参考：此答案仅在您依赖 this.activatedRoute.data 完成时才有效

您可以使用concat运算符

concat(this.activatedRoute.data, httpRequest1)
concat(this.activatedRoute.data, httpRequest2)

在前一个给定完成后，给定的 observable 切换到下一个。

这符合您的要求吗？ 你有点不确定“并且彼此独立完成”是什么意思。