Async/await与forEach结合执行顺序异常的修复方法

问题背景 #

你原本的顺序执行异步代码运行完全正常：

(async () => { 
  await runit('one').then(res => { console.info(res); }); 
  await runit('two').then(res => { console.info(res); }); 
})();

但改用forEach循环重构后，异步操作的执行顺序却不再符合预期：

const arr = ['one', 'two']; 
arr.forEach(element => { 
  (async () => { 
    await runit(element).then(res => { console.info(res); }); 
  })(); 
});

问题根源 #

forEach是为同步遍历设计的方法，它完全不会处理异步函数的等待逻辑。当你在forEach的迭代里创建自执行的async函数时，这些函数会被立刻并行启动——也就是说，runit('one')和runit('two')几乎同时开始执行，而不是等前一个完成再启动下一个，这就是顺序混乱的原因。

修复方案 #

方案1：使用for...of循环（最直观推荐）

把循环逻辑包裹在一个async函数内部，用for...of遍历数组，每次迭代都明确等待当前异步操作完成后再进行下一次：

const arr = ['one', 'two'];
(async () => {
  for (const element of arr) {
    const res = await runit(element);
    console.info(res);
  }
})();

这个写法和你最初的顺序执行代码逻辑完全一致，能严格保证runit('one')执行完成后，再启动runit('two')。

方案2：使用reduce构建Promise链

如果你更习惯用数组方法实现，可以借助reduce来串联Promise，强制前一个异步任务完成后再执行下一个：

const arr = ['one', 'two'];
arr.reduce(async (prevTask, element) => {
  // 等待前一个异步任务执行完毕
  await prevTask;
  const res = await runit(element);
  console.info(res);
}, Promise.resolve()); // 初始传入已完成的Promise，启动整个任务链

额外小优化 #

你原代码里的await ... .then(...)可以简化成更清晰的写法，减少嵌套：

// 原写法
await runit('one').then(res => { console.info(res); });
// 简化后
const res = await runit('one');
console.info(res);

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