为什么这个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)它在它之前.100ms后"10",然后5秒后"20".

来自MDN:

await表达式导致异步函数执行暂停,直到Promise被完成或拒绝,并在执行后继续执行async函数.

但似乎并没有发生这种情况.如果是,我们不会看到"Func1",然后是"10",那么func2会被执行,因此打印"Func2",5秒后我们得到"20"？应该执行func1,一旦解析(100毫秒),应触发console.log(var1).我在这里错过了什么？

Answer 1

这样做的原因是您之前已经运行过您的承诺执行者.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();