RxJS 等待 observable 然后創建另一個 observable，依此類推

Question

我在前端有一個樹狀結構，可能看起來像上圖中的樹。 由於設計后端的方式，我必須單獨保留每個節點。 但是要持久化一個節點，它必須知道它的父 ID。 我決定以自上而下、深度優先的順序保留節點，即[a,b,d,e,c] 。

我使用返回 Observable 的 HttpClient.post()。 要持久化b我必須等待HttpClient.post(a)返回a的 id，這是持久化b所必需的。

我能想到的唯一方法。 是以下內容：

of(1).pipe(
   mergeMap(() => httpClient.post(a)),
   tap(idOfA => b.parentId = idOfA),
   tap(idOfA => c.parentId = idOfA),
   mergeMap(() => httpClient.post(b)),
   tap(idOfB => d.parentId = idOfB),
   tap(idOfB => e.parentId = idOfB),
   mergeMap(() => httpClient.post(d)),
   mergeMap(() => httpClient.post(e)),
   mergeMap(() => httpClient.post(c))
).subscribe();

你可以忽略tap()的東西，因為它在后台自動發生。 只是為了說明，為什么要求取決於他們的父母要求返回。 簡化它看起來像這樣：

of(1).pipe(
   mergeMap(() => httpClient.post(a)),
   mergeMap(() => httpClient.post(b)),
   mergeMap(() => httpClient.post(d)),
   mergeMap(() => httpClient.post(e)),
   mergeMap(() => httpClient.post(c))
).subscribe();

發出請求，等待它返回，發出另一個請求等等。 我上面實現的東西適用於任何預先排序的 5 個節點列表。 問題是，對於可變大小的列表，我必須動態地執行此操作。

您能否提示我如何在任何類型的循環或類似構造的循環中執行此操作？

Answer 1

您可以使用concatMap()和parentId變量存儲最新的父 ID -

parentId: any;
  
of(a, b, c, d) // or you can also pass an array using from([a, b,c ,d])
.pipe(concatMap(val => httpClient.post('url', { parentId: this.parentId })))
.subscribe(res => {
  this.parentId = res.id;
  console.log(res);
});