为什么这个JavaScript异步/等待代码不能像预期的那样运行？

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：

wait表达式导致异步函数执行暂停，直到promise得到满足或拒绝，并在满足后恢复异步函数的执行。

但事情似乎不是这样的。如果是，我们会看到“Func1”，然后是“10”，然后执行func2，从而打印“func2”，5秒后我们会得到“20”吗？func1应该被执行，一旦它被解析（在100毫秒内），console.log（var1）应该被激发。我错过了什么？

Answer 1

await基本上意味着在继续之前可以使用以下值。promise在你创造它的时候就开始解决，等待它的时间并不重要。

Answer 2

这里的主要问题是func1和func2不是函数；它们是promise。正如Jonas W.所说，promise将调用其回调（解析，拒绝）=

您可以在此处看到所需的结果：

var func1 = () => {
   return new Promise((resolve, reject) => {
    console.log("Func1");
    setTimeout(() => {
      resolve(10);
    }, 100);
  });
}
        
var func2 = () => {
  return 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();

Answer 3

原因是您之前已经运行过您的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();