React项目中大量菜单过滤时Promise.all未触发then/catch的问题

嘿，恭喜你在Stack Overflow的第一个提问！这个问题其实挺常见的，咱们一步步来分析和解决。

首先，你的代码里一次性创建了1000个Promise，每个都会立刻启动对应的异步操作（也就是returnsPromise里的setTimeout）。虽然理论上Promise.all会等待所有Promise完成，但当数量过大时，浏览器的事件循环会被大量异步任务占满，内存压力也会飙升，这就可能导致部分Promise无法正常resolve，或者Promise.all的回调被延迟到无法察觉的程度，看起来像是没触发。

你不一定非要拆分成小批量，但批量处理是最稳妥且高效的方案，既能控制并发压力，又能保证流程正常执行。当然还有其他思路，不过先给你最实用的解决办法：

方法一：控制并发数的批量处理 #

写一个简单的工具函数，把大数组拆成小批次，一批处理完再处理下一批，避免一次性压垮浏览器：

// 批量处理工具函数：控制每次并发的Promise数量
async function processInBatches(array, batchSize, processor) {
  const finalResults = [];
  // 按批次遍历数组
  for (let i = 0; i < array.length; i += batchSize) {
    // 截取当前批次的元素
    const currentBatch = array.slice(i, i + batchSize);
    // 处理当前批次的所有元素，等待这一批完成
    const batchResults = await Promise.all(currentBatch.map(processor));
    // 把结果合并到最终数组
    finalResults.push(...batchResults);
  }
  return finalResults;
}

// 你的原有函数
const returnsPromise = () => {
  return new Promise(resolve => setTimeout(() => resolve('bye'), 5000));
};

// 使用批量处理
const myArray = new Array(1000).fill('hallo');
const menuProcessor = async (item) => {
  // 这里替换成你的实际菜单过滤逻辑
  const filteredResult = await returnsPromise();
  return filteredResult;
};

// 执行并更新视图
processInBatches(myArray, 10, menuProcessor)
  .then(res => {
    console.log(res);
    // 这里写更新视图的逻辑
  })
  .catch(err => console.error('处理出错：', err));

这个方法的好处是：

• 你可以根据实际情况调整batchSize（比如10、20），平衡处理速度和浏览器性能
• 避免一次性创建大量Promise导致的资源耗尽问题

其他思路（适合特定场景） #

如果你的菜单过滤逻辑不是依赖外部API（只是纯前端计算），那其实可以不用Promise，直接同步处理数组，效率会更高：

// 同步过滤（如果逻辑允许的话）
const filteredArray = myArray.map(item => {
  // 这里写同步的过滤逻辑，不用async/await
  return 'bye';
});
// 直接更新视图
console.log(filteredArray);

但如果必须用异步逻辑（比如依赖后端接口查询菜品信息），那批量控制并发还是最优解。

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