为什么这段代码输出顺序与React中Promise-setTimeout-regular代码链预期的不一样

Question

我对下面代码的输出感到困惑，就像这样；

setTimeout(() => {
    console.log("Timeot 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 ");
  }

因此，首先是一个超时，然后是 Promise，然后是常规代码，最后是 useEffect。请注意，Promise 之前没有

await

。

上述代码的输出是；

这看起来有点奇怪，我预计会出现以下输出；

• 常规内
• 内心的承诺
• 经常使用效果
• 承诺使用效果
• Timeot内码
• 超时使用效果

由于Promise是一个微任务但是没有

await

，我以为它会在常规代码之后执行，但这里是在常规代码之前执行。

所以我留下了这个问题，完全不知道发生了什么。

• 为什么Promise会在常规代码之前执行，因为有 没有

  await

  吗？

Answer 1

没有await，为什么Promise会先于常规代码执行？

这正是原因：因为没有

await

。

async

函数中的代码会同步执行，直到到达

await

为止。此时，该函数返回一个承诺。由于

promiseInner

和

promiseUseEffect

没有任何

await

，它们同步执行所有操作，它们与常规函数的唯一区别是它们返回一个解析为

undefined

的 Promise，而不是

undefined

.

如果出于某种原因你想强制异步函数提前返回其承诺，然后在微任务中进行日志记录，你可以这样做：

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