本文介绍在 ES6+ 环境中，如何将一批主机数据按 region 分组，并串行执行每组内的并发请求（Promise.all），最终汇总所有响应结果，适用于 React useEffect 场景且兼容现有 Promise 风格代码。
本文介绍在 es6+ 环境中，如何将一批主机数据按 region 分组，并**串行执行每组内的并发请求（promise.all）**，最终汇总所有响应结果，适用于 react useeffect 场景且兼容现有 promise 风格代码。
在实际开发中（如 React 应用），我们常需对大量主机执行健康检查（如 pinger() HTTP 请求），但出于服务端限流、日志可追溯性或调试便利性等需求，需按 region 分组、组间串行、组内并发执行请求——即：先完成所有 "bru" 区域主机的请求，再开始 "apc" 区域，依此类推。原 Promise.all(dataArray.map(...)) 是全量并发，无法满足此 CR 要求。
核心思路是：
✅ 利用 Set 提取唯一 region 列表，保证执行顺序可预测（ES2015+ 中 Set 迭代顺序与插入顺序一致）；
✅ 使用 for...of 循环（而非 .map().then() 链式调用）实现串行控制流；
✅ 每轮循环内，对当前 region 的有效主机（status !== 'disabled'）调用 Promise.all() 并 await 其完成；
✅ 结果以 { region: [result1, result2, ...] } 结构聚合，便于后续 setState 或进一步处理。
以下是完整、可直接集成的实现：
const pingHostsByRegion = (data) => {
// 提取唯一 region 并保持插入顺序（按首次出现顺序）
const regions = [...new Set(data.map(d => d.region))];
// 串行执行每个 region 的 Promise.all
return regions.reduce((promiseChain, region) => {
return promiseChain.then(async (allResults) => {
const regionHosts = data
.filter(d => d.status !== 'disabled' && d.region === region)
.map(host => pinger(host.hostname));
const regionResults = await Promise.all(regionHosts);
return { ...allResults, [region]: regionResults };
});
}, Promise.resolve({}));
};
// 在 useEffect 中使用（兼容 Promise 风格）
useEffect(() => {
pingHostsByRegion(dataArray)
.then(setPingedData) // 直接传入 setState 函数
.catch(console.error);
}, []);
⚠️ 注意事项：
- 避免 async/await 在 .map() 中误用：若在 map 内部 await 单个请求，会退化为串行执行（失去并发优势），务必确保 Promise.all() 封装的是未 await 的 Promise 数组；
- 空数组安全：Promise.all([]) 立即 resolve []，无需额外判断；
- 错误处理建议：生产环境应包裹 Promise.all() 并捕获单个失败（如使用 pinger().catch(e => ({ error: true, hostname, e }))），避免因单台主机失败导致整组中断；
- React 状态更新时机：若需逐 region 更新 UI（如加载状态），可在每次 await Promise.all(...) 后调用 setRegionLoading({ [region]: false })，再合并最终结果。
该方案不依赖外部库，纯 ES6+ 实现，逻辑清晰、可读性强，既保留了 Promise.all 的并发效率，又通过 reduce + then 或 for...of + await 实现了严格的组间串行语义，完美适配你的现有代码结构与业务约束。
