对未知数量的后续 HTTP 请求使用 RxJS

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用于返回一个发出第一个响应的可观察对象，然后是后续调用的结果
• switchMap订阅这个内部 observable 并发出结果
• scan用于将结果累积到单个数组中

这是一个有效的StackBlitz演示。