根据 Angular 中的页面大小多次 API 调用

Question

API 呼叫 - getList() => returns 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

您可以使用 RxJS forkJoin 函数来合并多个 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);
});

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

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

作为前端的解决方法，您可以使用 RxJS bufferCount operator with 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
);

根据 Angular 中的页面大小多次 API 调用

Multiple API calls based on page size in Angular

angular

rxjs

mergemap