React中ES6按区域分批执行Promise请求的实现方案咨询

要实现按区域分批执行HTTP请求（完成一个区域所有请求后再启动下一个区域），可以借助async/await串行处理每个区域的请求任务，具体实现如下：

核心思路 #

1. 将分组后的区域对象转换为可遍历的主机列表数组
2. 串行遍历每个区域，单个区域内的有效主机（非disabled）仍用Promise.all批量执行请求
3. 逐步收集各区域的请求结果，最终合并为完整结果并更新state

具体代码实现 #

在React的useEffect中编写逻辑（注意useEffect不能直接用async作为回调，需内部定义异步函数）：

useEffect(() => {
  const fetchByRegions = async () => {
    const allResults = [];
    // 将分组对象转为区域主机列表的数组
    const regionHostGroups = Object.values(sortedByRegionObj);

    for (const hostGroup of regionHostGroups) {
      // 处理当前区域的所有请求：过滤disabled主机，执行pinger
      const regionResults = await Promise.all(
        hostGroup.map(host => {
          if (host.status !== 'disabled') {
            return pinger(host.hostname);
          }
          return ''; // 和原有逻辑保持一致，disabled主机返回空字符串
        })
      );
      // 合并当前区域结果到总数组
      allResults.push(...regionResults);
    }

    // 所有区域请求完成后更新state
    setPingedData(allResults);
  };

  fetchByRegions().catch(err => {
    console.error('分批请求出错:', err);
  });
}, [sortedByRegionObj]);

代码说明 #

• Object.values(sortedByRegionObj)：把分组对象转换为各区域主机列表组成的数组，方便遍历
• for...of配合await：确保前一个区域的所有请求完成后，才启动下一个区域的请求
• 单区域内用Promise.all：保证单个区域内的请求并行执行，兼顾效率
• allResults.push(...regionResults)：将各区域结果展开合并，最终结果格式与原有Promise.all输出一致

可选：指定区域执行顺序 #

如果需要按特定顺序（比如先bru再apc）执行，可手动定义区域顺序数组：

// 自定义区域执行顺序
const regionOrder = ['bru', 'apc'];
const regionHostGroups = regionOrder.map(region => sortedByRegionObj[region]);

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