嵌套的Promise執行順序

Question

我正在閱讀關於嵌套promise的內容，並在教程中遇到了這個編碼挑戰。有人能解釋一下這段程式碼的執行順序嗎？

new Promise((resolve) => {
    new Promise((res) => {
        console.log("c");
        resolve(3);
        res(2);
    }).then((response) => console.log(response))
}).then((res) => console.log(res));

我運行了這段程式碼，輸出結果是：

c
2
3

但是我本來期望輸出結果應該是：

c
3
2

因為外部的promise先被解析，然後內部的promise稍後被解析。

Answer 1

除了Nicholas的答案之外，你可能被標識符'res'的重複使用所困擾。在內部Promise中的第一次使用是作為回調函數，它將值2傳回給Promise。 最後一行中的第二次使用是在不同的作用域中，並且用作外部Promise的.then()方法的參數名稱。 如果你將最後一行中的'res'替換為'outerPromiseResult'，可能會有所幫助，以澄清事情。

Answer 2

簡而言之，這是因為您呼叫.then的順序。

new Promise((resolve) => {
    new Promise((res) => {
        console.log("c");
        resolve(3);
        res(2);

在上面的程式碼中，我們進入了外部建構函數，它立即呼叫外部函數。然後建立內部Promise，呼叫內部函數。內部函數記錄“c”，然後將外部Promise解析為3，然後將內部Promise解析為2。

所以此時我們有2個已解析的Promise，但沒有嘗試使用它們的程式碼。

}).then((response) => console.log(response))

完成建構內部Promise後，我們在內部Promise上呼叫.then。由於Promise已解析，這會排隊一個微任務來運行。

}).then((res) => console.log(res));

完成建構外部Promise後，我們在外部Promise上呼叫.then。由於Promise已解析，這會排隊一個微任務來運行。

現在我們已經完成了所有同步程式碼的運行。呼叫堆疊為空，微任務開始運作。這些按照先進先出的順序執行，所以與內部Promise相關的微任務首先運行，記錄2。然後運行剩餘的微任務，記錄3。