如何用async/await创建同步循环？现有代码无法逐个输出结果

这个问题我太熟悉了！你遇到的核心问题是：map方法会立刻执行所有数组元素对应的异步函数，相当于同时启动了10个定时器，它们都会在1秒后同时完成，所以结果会一次性批量输出，而不是逐个依次输出。

为什么当前代码会这样？ #

async函数本身返回的是Promise对象，当你用map遍历数组时，它会瞬间把所有10个异步函数都调用一遍，把10个Promise放进一个数组里，但并没有等待每个Promise完成再执行下一个——所有异步操作是并行启动的，自然会同时结束。

解决方案：让异步操作串行执行 #

要实现逐个输出的效果，我们需要让每个异步操作等待上一个完成后再执行，下面是两种常用的实现方式：

方式1：使用for...of循环（最直观）

这是最容易理解和维护的方式，for...of会在每次循环中等待await完成后，再进入下一次迭代：

const p = () => new Promise((resolve) =>{ 
  setTimeout(()=>{ 
    resolve(Math.floor(Date.now() / 1000)) 
  },1000) 
}) 
const test = async () =>{ 
  for (const _ of [1,2,3,4,5,6,7,8,9,10]) { 
    const e = await p(); 
    console.log(e) 
  } 
} 
test();

运行这段代码，你会看到每隔1秒就打印一个时间戳，完全符合你的预期。

方式2：使用reduce串联Promise（适合链式场景）

如果你更习惯用数组方法，可以用reduce把所有Promise串联起来，确保前一个完成后再执行下一个：

const p = () => new Promise((resolve) =>{ 
  setTimeout(()=>{ 
    resolve(Math.floor(Date.now() / 1000)) 
  },1000) 
}) 
const test = async () =>{ 
  // 用reduce串联Promise，初始值是一个已resolve的Promise
  await [1,2,3,4,5,6,7,8,9,10].reduce(async (prevPromise) => {
    // 等待上一个Promise完成
    await prevPromise;
    // 执行当前异步操作并打印结果
    const e = await p();
    console.log(e);
  }, Promise.resolve());
} 
test();

总结 #

要实现类同步的循环输出，核心是把并行启动的异步操作改成串行执行。map天生是并行处理数组元素的，所以不适合这种场景；而for...of或reduce串联Promise的方式，能完美满足逐个执行、逐个输出的需求。

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