javascript - 异步函数与 Promises 一起工作很奇怪

Question

我正在尝试了解异步函数的机制。我在 MDN 文档 MDN docs 上找到了一些代码，做了一些修改......无法完全理解它是如何工作的。

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==”，然后“开始慢 promise ”，然后我们有一个带有 setTimeout 的 Promise，这表明“慢 promise 已完成” ' 将在 6 秒后出现，并且resolve(20) 回调将保留在 api 容器中，因为执行堆栈将为空。JS 为我们提供“开始快速 promise ”，四秒后我们得到“快速 promise 已完成”，然后立即 10 ，“为什么？”，20。

我不明白:后台到底发生了什么 - 我知道resolve(20)保存在api容器中并且执行其余代码，然后resolve(10)也保存在api容器中并且当执行堆栈为空，它们作为解决 Promise 的结果返回。

但是:

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);
    });
  });
}

I know that resolve(20) is kept in api container and the rest of the code are executed, then resolve(10) is also kept in api container and when the execution stack is empty they are returned as the results of resolving their Promises

这不是使用 async-await 时发生的情况，您的代码正在执行以下特定顺序:

1. 调用resolveAfter2Seconds()
2. 等待它解析，然后将解析后的值分配给常量slow
3. 调用resolveAfter1Second()
4. 等待它解析，然后将解析后的值分配给常量fast
5. 调用 console.log(fast)，然后 console.log('why?')，然后 console.log(慢)

您似乎期望 promise 能够并行解决，就像您不使用 async-await 时一样，但 async-await 的全部目的是能够使用 promise 编写代码，就好像它是同步(即阻塞)代码，而不会创建嵌套困惑的 then 回调。