javascript - 使用 RxJS 处理未知数量的连续 HTTP 请求

Question

我需要从我们的 API 中获取大量数据点。
然而，这些不能一次全部获取，因为响应时间太长，所以我想把它分成多个请求。响应看起来像这样:

{
  href: www.website.com/data?skip=0&limit=150,
  nextHref: www.website.com/data?skip=150&limit=150,
  maxCount: 704,
  skip: 0,
  count: 150,
  limit:150,
  results: [...]
}

所以，最终我需要不断地调用 nextHref直到我们真正到达最后一个。
在每个请求之后，我想获取结果并将它们连接成一个数据列表，该列表将在 UI 上更新。
我对 Obervables 的世界比较陌生，但想用 RxJS 创建一个解决方案。有谁知道如何实现这一点？
最让我感动的部分是我不知道我必须提前完成多少请求。它只需要继续循环直到完成。

Answer 1

看起来您可以确定在收到第一个响应后要调用的电话次数。因此，我们可以进行第一次调用，并构建一个 observable，它返回“第一次调用”的结果以及所有后续调用的结果。
我们可以使用scan将结果累积到单个数组中。

const results$ = makeApiCall(0, 150).pipe(
  switchMap(firstResponse => {
    const pageCount = Math.ceil(firstResponse.maxCount / firstResponse.limit);
    const pageOffsets = Array(pageCount - 1).fill(0).map((_, i) => (i + 1) * firstResponse.limit);

    return concat(
      of(firstResponse),
      from(pageOffsets).pipe(
        mergeMap(offset => makeApiCall(offset, firstResponse.limit), MAX_CONCURRENT_CALLS)
      )
    );
  }),
  scan((acc, cur) => acc.concat(cur.results), [])
);

这是它的作用的分割:

我们先调用makeApiCall()因此我们可以确定需要调用多少其他电话

from 创建一个 observable，它发出我们的 offsets 数组一次一个

mergeMap 将执行我们对 makeApiCall() 的后续调用使用传入的偏移量并发出结果。请注意，您可以提供“并发”限制，以控制一次调用的数量。

concat 用于返回发出第一个响应的 observable，然后是后续调用的结果

switchMap 订阅此内部 observable 并发出结果

scan 用于将结果累积到单个数组中

这是一个有效的 StackBlitz演示。