angular - Angular中基于页面大小的多个API调用

Question

API 调用 - getList()=> 返回 1000 个数字

• 说 1,2,3...1000

通过获取前 20 名以上的结果进行 20 次 API 调用

我正在尝试做这样的事情

this.http.get('urlService').mergeMap((ids: number[]) => this.getItems(ids.slice(0, 20))).
  subscribe(newsList => {
    this.dataRecieved.next(newsList);
  })

但它不工作

Answer 1

您可以使用 RxJSforkJoin函数来组合多个 HTTP 请求。只有在所有可观察对象完成时才会发出。

this.http.get('urlService').pipe(
  switchMap((ids: number[]) => forkJoin(ids.slice(0, 20).map(id => this.getItems(id))))
).subscribe(newsList => {
  // newsList[0] - response from `this.getItems(1)`
  // newsList[1] - response from `this.getItems(2)`
  ...
  this.dataRecieved.next(newsList);
});

我正在使用 Arraymap函数将列表转换[1, 2, ..., 20]为 HTTP 请求列表[this.getItems(1), this.getItems(2), ..., this.getItems(20)]。

---

但是，请注意，这会同时触发 20 个 HTTP 调用。大多数浏览器对可以对同一域进行多少并发调用都有硬性限制（Chrome - 6）。解决此限制问题的推荐方法是使用 WebSockets 或域分片。

作为前端的解决方法，您可以使用bufferCount带有函数的 RxJS 运算符from来控制一次发出的最大并行请求数。

this.http.get('urlService').pipe(
  switchMap((ids: number[]) => from(ids.slice(0, 20).map(id => this.getItems(id)))),
  bufferCount(6),                         // <-- adjust number of parallel requests here
  concatMap(buffer => forkJoin(buffer))
).subscribe(
  newsList => this.dataRecieved.next(newsList),
  error => // handle error
);