如何將 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 切換到下一個。

這符合您的要求嗎？ 你有點不確定“並且彼此獨立完成”是什么意思。