Promise与Await协同机制解析及异步代码顺序执行修正求助

你想要实现前一个任务完成后再启动下一个任务的串行执行效果，原始的setTimeout代码因为是异步并行触发，所以会先打印所有"Started"，再按延迟时间依次打印"Completed"。你尝试用Promise和await改造，但代码没达到预期，问题出在你对await的使用细节上，我来帮你修正并解释清楚。

原始代码与输出 #

首先回顾你给出的原始并行执行代码：

console.log("One: Started");
setTimeout(function(){console.log("One: Completed")}, 1000);
console.log("Two: Started");
setTimeout(function(){console.log("Two: Completed")}, 2000);
console.log("Three: Started");
setTimeout(function(){console.log("Three: Completed")}, 3000);

输出是：

One: Started
Two: Started
Three: Started
One: Completed
Two: Completed
Three: Completed

你的代码问题分析 #

你写的async函数里，await后面跟着的是一个未被调用的匿名函数，而不是Promise对象。await需要等待的是一个Promise的状态变更，但你现在只是定义了一个能返回Promise的函数，却没有执行它，所以await会直接跳过等待，继续执行后面的代码，自然达不到串行效果。

修正后的代码 #

我把逻辑封装成一个可复用的函数，让代码更清晰，同时修复await的使用问题：

async function LogAll() {
  // 封装通用的延迟日志函数，接收要打印的消息和延迟时间
  const delayedLog = (message, delay) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(message);
        resolve(); // 任务完成时调用resolve，通知await可以继续
      }, delay);
    });
  };

  // 串行执行每一步
  console.log("One: Started");
  await delayedLog("One: Completed", 1000);
  
  console.log("Two: Started");
  await delayedLog("Two: Completed", 2000);
  
  console.log("Three: Started");
  await delayedLog("Three: Completed", 3000);
}

LogAll();

代码原理解释 #

1. async函数的基础：用async标记的函数会自动成为一个Promise生成器，内部可以使用await关键字来暂停执行。
2. await的核心作用：await后面必须跟一个Promise对象（或者具有then方法的对象）。当执行到await时，async函数会暂停当前执行流程，直到这个Promise的状态变为resolved（也就是调用了resolve()），才会继续执行await之后的代码。
3. 为什么你的原代码无效：你写的await function() { ... }只是一个函数定义，没有加()调用，所以await拿到的是函数本身，而不是函数返回的Promise。JavaScript会把非Promise值直接视为已resolved的Promise，所以不会等待，直接往下走。如果要保留你的写法，需要改成await (function() { ... })()（立即调用这个匿名函数，拿到它返回的Promise），但封装成单独函数的写法更易读和复用。
4. 串行效果的实现：每一步都先打印"Started"，然后await对应的延迟日志Promise。只有当这个Promise的resolve()被调用（也就是setTimeout里的日志打印完成），才会进入下一个任务的"Started"打印，完美实现了前一个任务完成后再启动下一个的效果。

修正后的输出 #

执行修正后的代码，输出会变成你想要的串行顺序：

One: Started
One: Completed
Two: Started
Two: Completed
Three: Started
Three: Completed

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