函数返回Promise与直接创建Promise在async/await中执行差异原因问询

核心底层规则 #

Promise 实例的 executor 函数（即传入 new Promise() 的回调函数）会在实例创建的那一刻同步执行，和后续是否使用 await 无关。await 的作用仅为暂停当前 async 函数的执行，等待目标 Promise 状态变更为 fulfilled 后再继续执行后续代码，它不会控制 Promise 本身的异步任务启动时机。

第一种串行执行场景的逻辑 #

你通过函数返回 Promise 的写法中，Promise 实例是按顺序延迟创建的：

const func = async () => {
  // 执行到当前行时才调用setTimer(1)，创建第一个Promise实例，启动第一个2秒定时器
  const first = await setTimer(1)
  console.log(first);
  // 第一个Promise resolve后，才会执行到当前行，调用setTimer(2)创建第二个Promise，启动第二个2秒定时器
  const second = await setTimer(2)
  console.log(second);
  // 第二个Promise resolve后，才会创建第三个Promise，启动第三个定时器
  const third = await setTimer(3)
  console.log(third);
}

三个定时器依次启动，总耗时为 2*3=6 秒，表现为串行执行。

第二种并行执行场景的逻辑 #

你提前声明三个独立 Promise 实例时，三个实例的创建动作是同步依次完成的，对应的三个定时器几乎同时启动：

// 代码加载到当前行就立刻创建第一个Promise，启动第一个2秒定时器
const setTimer1 = new Promise((res, rej) => {
  setTimeout(() => res(1), 2000);
})
// 紧接着立刻创建第二个Promise，启动第二个2秒定时器
const setTimer2 = new Promise((res, rej) => {
  setTimeout(() => res(2), 2000);
})
// 紧接着立刻创建第三个Promise，启动第三个2秒定时器
const setTimer3 = new Promise((res, rej) => {
  setTimeout(() => res(3), 2000);
})

三个定时器同时计时，2秒后三个 Promise 几乎同时变为 fulfilled 状态。你在 func1 中按顺序 await 时，第一个 await 等待2秒拿到结果后，后两个 Promise 已经是完成状态，不需要额外等待，因此会立刻输出后续结果，总耗时仅2秒左右，表现为并行执行。

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