异步函数与Promises一起使用很奇怪

Question

我试图了解异步功能的机制。 我在MDN文档MDN文档上找到了一些代码，进行了一些修改，...无法完全理解其工作原理。

 var resolveAfter2Seconds = function() { console.log("starting slow promise"); return new Promise(resolve => { setTimeout(function() { resolve(20); console.log("slow promise is done"); }, 6000); }); }; var resolveAfter1Second = function() { console.log("starting fast promise"); return new Promise(resolve => { setTimeout(function() { resolve(10); console.log("fast promise is done"); }, 4000); }); }; var sequentialStart = async function() { console.log('==SEQUENTIAL START=='); const slow = await resolveAfter2Seconds(); const fast = await resolveAfter1Second(); console.log(fast); console.log('why?'); console.log(slow); } sequentialStart(); 

现在我知道，如果我们运行此代码，我们将立即在控制台上接收到“ == SEQUENTIAL START ==”，然后“启动缓慢的承诺”，然后出现一个带有setTimeout的Promise，它指示“缓慢的承诺已完成” 6秒钟后，由于执行堆栈为空，resolve（20）回调将保留在api容器中。JS给我们“开始快速承诺”，四秒钟后我们得到“快速承诺已完成”，然后立即10，“为什么？'，20。

我不明白：到底在后台发生了什么-我知道resolve（20）保留在api容器中，其余代码被执行，然后resolve（10）也保留在api容器中，当执行堆栈如果它们为空，则作为解决其承诺的结果返回。

但：

1. 计时器呢？ 10，为什么20在他们的超时时间过后很长-解决20在6秒后很长的时间在屏幕上。

2. 订购什么？ 似乎它们（resolve20和resolve 10）已准备好执行并保存在内存中，直到我使用它们为止-在这种情况下，请在控制台中打印它们？ 时间出现和顺序

我决心正确地理解它。

Answer 1

也许这将有助于清理问题。 Async-await只是语法糖，因此您的sequentialStart函数与以下内容完全相同：

var sequentialStart = function() {
  console.log('==SEQUENTIAL START==');

  resolveAfter2Seconds().then(function(slow) {

    resolveAfter1Second().then(function(fast) {

      console.log(fast);
      console.log('why?');
      console.log(slow);
    });
  });
}

我知道resolve（20）保留在api容器中，其余代码被执行，然后resolve（10）也保留在api容器中，当执行堆栈为空时，它们作为解决其承诺的结果返回

这不是使用async-await时发生的事情，您的代码正在按以下特定顺序执行以下操作：

1. 调用resolveAfter2Seconds()
2. await它解析，然后将解析值分配给恒定slow
3. 调用resolveAfter1Second()
4. await它解析，然后将解析值fast分配给常数
5. 调用console.log(fast) ， 然后调用console.log(fast) console.log('why?') ， 然后调用console.log(fast) console.log(slow)

似乎您期望promise可以并行解决，就像您不使用async-await一样，但是async-await的全部目的是能够像promise一样使用promise编写代码（即阻止）代码，而不会创建嵌套的then回调的混乱情况。