如何通过async/await让while循环等待Vue异步getResults执行完再迭代？

完全可以通过async/await配合Promise实现循环串行等待，等上一次迭代的所有异步逻辑（包括vm.getResults()、循环内部的setTimeout）全部执行完成后，再进入下一次循环。

• while循环本身是同步执行逻辑，你在循环内部嵌套的自执行async函数没有被外层逻辑挂起等待，会在极短时间内触发所有轮次的异步任务，完全没有串行效果
• 你手动封装的Promise存在逻辑错误：调用vm.getResults()之后立刻执行了Resolve()，相当于完全没有绑定异步函数的真实完成状态，哪怕加了await也拿不到有效的等待信号
• 你遇到的setTimeout来不及执行的问题，本质是循环的同步逻辑执行速度远快于事件队列中延时任务的触发速度，所有延时任务还没轮到执行，循环的状态已经全部走完，后续的任务执行时上下文已经被覆盖。

基础版（当vm.getResults()本身返回标准Promise时） #

把整个循环逻辑包裹在async函数中，每一轮迭代直接await对应的异步结果即可，不需要多余的嵌套自执行函数：

async function runSerialLoop() {
  let i = 0
  while (i < data.length) {
    // 等待当前轮的getResults完全执行完成，再往下走
    await vm.getResults()
    // 此处可写当前轮的其他逻辑，包括内部的setTimeout，都会按顺序触发
    i++
  }
  // 所有循环全部完成后的后续逻辑
}
// 启动循环
runSerialLoop()

兼容版（当vm.getResults()是回调风格、不返回Promise时） #

需要手动把异步函数的完成时机和Promise绑定，不要提前调用resolve：

// 封装带完成信号的getResults
function getResultsWithSignal() {
  return new Promise((resolve) => {
    vm.getResults(() => {
      // 等getResults内部所有逻辑、包括它内部的setTimeout跑完，触发完成回调时再resolve
      resolve()
    })
  })
}

// 循环逻辑和基础版一致
async function runSerialLoop() {
  let i = 0
  while (i < data.length) {
    await getResultsWithSignal()
    // 如果循环逻辑内部还有独立的setTimeout，也可以包成Promise顺序等待
    // await new Promise(resolve => setTimeout(resolve, 100))
    i++
  }
}

• 不要在Promise的构造函数里，发起异步调用之后立刻同步调用resolve()，这会让Promise处于完成状态，完全失去等待作用
• 如果需要在循环中控制setTimeout的执行时机，直接把setTimeout本身包成可await的Promise即可，不要把setTimeout丢到没有等待的异步块里
• 循环里的await会主动挂起循环逻辑，等到await的Promise状态变为完成后，才会继续执行下一轮的迭代判断，从根本上解决循环跑太快、异步任务来不及执行的问题

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