javascript - 为什么这个 JavaScript async/await 代码没有按预期运行？

Question

我已经尝试阅读有关异步/等待的指南和教程，但我似乎无法在任何地方找到解决这个问题的方法。

这里是有问题的代码:

    var func1 = new Promise((resolve, reject) => {
      console.log("Func1");
      setTimeout(() => {
        resolve(10);
      }, 100);
    });
    
    var func2 = new Promise((resolve, reject) => {
      console.log("Func2");
      setTimeout(() => {
        resolve(20);
      }, 5000);
    })
    
    let run = async() => {
      let var1 = await func1;
      let var2 = await func2;
      console.log(var1);
      console.log(var2);
    }

    run();

我们看到“Func1”和“Func2”被立即打印出来，一个接一个。 5 秒后，在 func2 中指定的超时时间，我们打印了“10”和“20”。到目前为止一切顺利。

但是如果我把最后一段代码改成这样:

let run = async() => {
  let var1 = await func1;
  console.log(var1);
  let var2 = await func2;
  console.log(var2);
}

然后我立即看到“Func1”被打印出来，但是“Func2”也被打印出来，即使 console.log(var1) 出现在它之前。 100 毫秒后为“10”，5 秒后为“20”。

来自 MDN:

The await expression causes async function execution to pause until a Promise is fulfilled or rejected, and to resume execution of the async function after fulfillment.

但这似乎不是正在发生的事情。如果是，我们不会看到“Func1”，然后是“10”，然后 func2 被执行，从而打印“Func2”，5 秒后我们得到“20”吗？ func1 应该被执行，一旦它被解析(在 100 毫秒内)，console.log(var1) 应该被触发。我在这里缺少什么？

Answer 1

这是因为您之前已经运行过您的 promise 执行器。 Promise 执行器在传递给 Promise 构造函数时会立即进行评估，因此您将获得以下内容:

var func1 = new Promise((resolve, reject) => ...); // Logs "Func1"
var func2 = new Promise((resolve, reject) => ...); // Logs "Func2"

let run = async() => {
  let var1 = await func1;
  console.log(var1); // Logs 10
  let var2 = await func2;
  console.log(var2); // Logs 20
}

run();