时间戳

首页 > 解决方案 > RxJS 等待 observable 然后创建另一个 observable，依此类推

angular - RxJS 等待 observable 然后创建另一个 observable，依此类推

问题描述

树

我在前端有一个树状结构，它可能看起来像上图中的树。由于后端的设计方式，我必须单独保存每个节点。但是要持久化一个节点，它必须知道它的父 ID。我决定以自上而下、深度优先的顺序保留节点，即[a,b,d,e,c].

我使用返回 Observable 的 HttpClient.post()。要坚持b，我必须等待HttpClient.post(a)返回 的 id a，这是坚持所必需的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 个节点的预排序列表。问题是，对于可变大小的列表，我必须动态地执行此操作。

您能否给我一个提示，告诉我如何在任何类型的循环或类似构造的循环中做到这一点？

标签： angularrxjs

解决方案

您可以使用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);
});

推荐阅读