JavaScript异步批处理本质是延迟收集请求、聚合参数、统一发起一次网络调用，再按原始顺序/标识分发响应，通过手动节流+Promise缓存+请求合并实现，核心在暂存与聚合而非并发。
JavaScript 中的异步批处理（Async Batching）本质是**延迟收集请求、聚合参数、统一发起一次网络调用，再按原始顺序/标识分发响应**。它不是语言原生特性，而是通过手动节流 + Promise 缓存 + 请求合并逻辑实现的模式，常用于优化高频小请求（如逐个查用户头像、获取多个商品价格等）。
核心思路：收集 → 延迟 → 合并 → 分发
关键不在“并发”，而在“暂存+聚合”。典型流程如下：
- 当调用批量函数（如 fetchUser(id)）时，不立即发请求，而是把 id 和对应的 Promise resolve/reject 存入队列
- 启动一个微任务/定时器（常用 Promise.resolve().then() 或 setTimeout(fn, 0)），等待同一批次内其他调用进来
- 超时或队列满时，取出所有待处理的 id，拼成一个批量接口请求（如 /api/users/batch?id=1&id=2&id=3）
- 收到响应后，按原始 id 映射回每个 resolve，保证调用方拿到对应结果
简易实现示例（基于 Promise 队列）
以下是一个轻量、可复用的批量请求封装（支持任意 key 和单次请求）：
function createBatcher(fetchFn, delay = 0) {
const queue = [];
let scheduled = false;
return async function batchRequest(key) {
return new Promise((resolve, reject) => {
queue.push({ key, resolve, reject });
if (!scheduled) {
scheduled = true;
Promise.resolve().then(() => {
const currentQueue = [...queue];
queue.length = 0;
scheduled = false;
const keys = currentQueue.map(item => item.key);
fetchFn(keys)
.then(results => {
// 假设 results 是 { id: 1, name: "A" }[]，且与 keys 顺序一致
currentQueue.forEach((item, i) => {
const result = results[i];
if (result != null) item.resolve(result);
else item.reject(new Error(`Missing result for ${item.key}`));
});
})
.catch(err => currentQueue.forEach(item => item.reject(err)));
});
}
});
};
}
// 使用示例：批量查用户
const fetchUsersBatch = createBatcher(
async (ids) => {
const res = await fetch(`/api/users?ids=${ids.join(',')}`);
return res.json(); // 假设返回 [{id:1,...}, {id:2,...}]
},
0
);
// 这三行几乎同时执行，只会触发一次 HTTP 请求
const a = fetchUsersBatch(1);
const b = fetchUsersBatch(2);
const c = fetchUsersBatch(3);
// 结果各自独立，顺序无关
console.log(await a); // {id:1, ...}
console.log(await b); // {id:2, ...}
注意事项与进阶点
- 超时控制：纯微任务（Promise.then）可能因事件循环阻塞导致延迟不可控，生产环境建议加 setTimeout(..., 10) 作为兜底上限
- 去重与更新：同一 key 多次调用应复用已有 Promise，避免重复入队；可用 Map 缓存未决 Promise
- 错误隔离：单个 key 失败不应影响其他 key，服务端最好支持部分成功（如返回 { "1": {...}, "2": null }）
- 服务端配合：必须有对应批量接口（如 /batch?ids=a,b,c），且返回结构能按 key 准确映射
现成工具推荐（减少重复造轮子）
如果不想手写，可直接集成成熟方案：
立即学习“Java免费学习笔记（深入）”；
- dataloader（最主流）：Facebook 开源，内置批处理 + 缓存 + 去重，专为 GraphQL 场景设计但通用性强
- swr & react-query 的 batch hooks：现代数据请求库已内置类似能力（如 useQueries + 自定义组合）
- lodash.debounce + custom aggregator：适合简单场景，用防抖聚合参数再发请求
