異步函數與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回調的混亂情況。