Angular实现每2个一组分批并发HTTP请求的方法

核心思路 #

先将payload数组按每2个元素分成批次，每批次内用forkJoin并行发起请求，再通过concatMap保证上一批次的所有请求完成后，才发起下一批次的请求。

实现方案1：先分组再处理 #

先写一个简单的数组分组工具函数，再用RxJS操作符串联批次请求：

// 数组分组工具函数：将数组按指定大小拆分成子数组
function chunkArray<T>(array: T[], size: number): T[][] {
  const chunks = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }
  return chunks;
}

// 你的业务代码
const payload = [1, 2, 3, 4];
const batchSize = 2;
const API_ENDPOINT = '你的接口地址';

// 1. 拆分payload为每2个元素一组
const payloadBatches = chunkArray(payload, batchSize);

// 2. 将每个批次转换为并行请求的Observable
const batchRequests = payloadBatches.map(batch => 
  forkJoin(
    batch.map(el => this.http.get(API_ENDPOINT, { params: { el } }))
  )
);

// 3. 顺序执行每个批次，等待上一批完成再执行下一批
from(batchRequests).pipe(
  concatMap(batchObs => batchObs),
  // 可选：收集所有批次的结果，合并成一个完整数组（和原payload顺序一致）
  scan((totalResults, batchResults) => [...totalResults, ...batchResults], [])
).subscribe(allResults => {
  // 处理所有请求完成后的结果
  console.log('所有请求结果：', allResults);
});

实现方案2：用RxJS原生操作符简化分组 #

不需要单独写分组函数，直接用bufferCount操作符实现自动分组，代码更简洁：

const payload = [1, 2, 3, 4];
const batchSize = 2;
const API_ENDPOINT = '你的接口地址';

from(payload).pipe(
  // 每2个元素组成一个批次
  bufferCount(batchSize),
  // 对每个批次发起并行请求，等待当前批次完成再处理下一批
  concatMap(batch => forkJoin(
    batch.map(el => this.http.get(API_ENDPOINT, { params: { el } }))
  )),
  // 合并所有批次的结果为一个数组
  scan((total, batchRes) => [...total, ...batchRes], [])
).subscribe(allResults => {
  console.log('所有请求结果：', allResults);
});

关键细节说明 #

• forkJoin：用于同一批次内的并行请求，只有当批次里所有请求都成功返回时，才会发射该批次的结果数组。
• concatMap：保证Observable的顺序执行，必须等前一个批次的所有请求完成，才会订阅并执行下一个批次的请求，完全符合你“等待结果返回后再发起新请求”的需求。
• scan：可选操作，用来把每批次的结果逐步合并成一个完整的结果数组，最终得到的allResults和直接用forkJoin一次性发起所有请求的结果顺序完全一致。
• 注意：原代码中{ el }的写法有误，Angular HttpClient的请求参数需要放在params字段中，所以修正为{ params: { el } }。

内容的提问来源于stack exchange，提问作者Mouad Ennaciri