如何实现分页API数据批量拉取并合并为单一结果

1. 先修改getAllItems方法，支持分页参数 #

原方法仅能发起固定请求，我们需要让它接收limit和offset参数，以构造不同的分页请求：

getAllItems(limit = 10, offset = 0): Observable<HttpResponse<any>> {
  const url = `URL/items?limit=${limit}&offset=${offset}&count=true`;
  return this.http.get(url, { observe: 'response' });
}

2. 用RxJS操作符串联请求，合并所有数据 #

通过switchMap先获取总条数，再计算需要发起的分页请求，最后合并所有结果：

this.httpCall.getAllItems()
  .pipe(
    // 第一次请求拿到总条数和第一页数据
    switchMap(firstResponse => {
      const totalCount = parseInt(firstResponse.headers.get('X-Total-Count') || '0', 10);
      const limit = 10;
      // 计算总页数（向上取整）
      const totalPages = Math.ceil(totalCount / limit);
      
      // 生成后续分页请求的Observable数组（跳过第一页，因为已获取）
      const pageObservables: Observable<HttpResponse<any>>[] = [];
      for (let page = 1; page < totalPages; page++) {
        const offset = page * limit;
        pageObservables.push(this.httpCall.getAllItems(limit, offset));
      }

      // 合并第一页与后续所有请求的结果
      return forkJoin([of(firstResponse), ...pageObservables]).pipe(
        // 提取所有响应的body并合并为一个数组
        map(responses => responses.flatMap(res => res.body))
      );
    })
  )
  .subscribe(allItems => {
    // allItems即为全部65条数据，直接遍历处理
    for (const each of allItems) {
      // 你的业务逻辑
      .....
    }
    // 其他后续逻辑
    ....
  });

关键操作符说明 #

• switchMap：将第一次请求的结果转换为新的Observable流，用于根据总条数生成后续分页请求。
• forkJoin：等待所有传入的Observable完成后，返回包含所有结果的数组，适合并行发起分页请求（若后端允许）。如果需要顺序发起请求，可将forkJoin替换为concat，并展开数组参数（concat(of(firstResponse), ...pageObservables)）。
• flatMap：将多个响应的body数组合并为一个大数组，方便后续统一遍历。

注意事项 #

• 需处理X-Total-Count为空的情况，默认设为0避免计算错误。
• 若后端限制并行请求数量，建议使用concat顺序发起，避免触发限流。

内容的提问来源于stack exchange，提问作者Chris T