React中Promise-setTimeout-常规代码链输出顺序不符预期的原因

问题代码 #

setTimeout(() => {
    console.log("Timeout inner code");
  }, 500);

  promiseInner();

  console.log("Regular inner");

  useEffect(() => {
    setTimeout(() => {
      console.log("Timeout useEffect");
    }, 500);

    promiseUseEffect();

    console.log("Regular useEffect");
  }, []);

  async function promiseInner() {
    console.log("Promise inner");
  }
  async function promiseUseEffect() {
    console.log("Promise useEffect ");
  }

预期输出 #

• Regular inner
• Promise inner
• Regular useEffect
• Promise useEffect
• Timeout inner code
• Timeout useEffect

实际执行困惑 #

实际输出里，Promise inner先于Regular inner执行，Promise useEffect先于Regular useEffect执行，这和“微任务会在常规代码后执行”的预期不符，疑问点：未使用await的Promise调用为何先于常规代码执行？

解答 #

核心是对async函数执行逻辑的误解：
async函数的调用本身是同步执行的，只有当函数内部遇到await关键字时，才会暂停当前函数执行，把后续逻辑推入微任务队列。

你定义的两个async函数内部没有任何await语句，所以调用它们时，函数体里的console.log会立即同步执行，完全不会进入微任务队列。

实际执行流程拆解：

1. 组件初始化同步阶段：
   • 调用setTimeout，将回调放入宏任务队列（延迟500ms）
   • 调用promiseInner()，同步执行console.log("Promise inner")
   • 执行console.log("Regular inner")
   • 注册useEffect钩子（回调需等组件挂载完成后执行）
2. 组件挂载完成后，执行useEffect回调：
   • 调用setTimeout，将回调放入宏任务队列（延迟500ms）
   • 调用promiseUseEffect()，同步执行console.log("Promise useEffect ")
   • 执行console.log("Regular useEffect")
3. 500ms后，两个setTimeout回调依次进入宏任务队列执行：
   • console.log("Timeout inner code")
   • console.log("Timeout useEffect")

所以实际输出顺序是：

• Promise inner
• Regular inner
• Promise useEffect
• Regular useEffect
• Timeout inner code
• Timeout useEffect

简言之：没有await的async函数和普通同步函数没区别，调用时会立即执行内部代码，自然比后续的常规代码先输出。

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