嵌套的Promise執行順序
P粉459440991
P粉459440991 2023-08-16 19:20:33
0
2
568
<p>我正在閱讀關於嵌套promise的內容,並在教程中遇到了這個編碼挑戰。有人能解釋一下這段程式碼的執行順序嗎? </p> <pre class="brush:php;toolbar:false;">new Promise((resolve) => { new Promise((res) => { console.log("c"); resolve(3); res(2); }).then((response) => console.log(response)) }).then((res) => console.log(res));</pre> <p>我運行了這段程式碼,輸出結果是:</p> <pre class="brush:php;toolbar:false;">c 2 3</pre> <p>但是我本來期望輸出結果應該是:</p> <pre class="brush:php;toolbar:false;">c 3 2</pre> <p>因為外部的promise先被解析,然後內部的promise稍後被解析。 </p>
P粉459440991
P粉459440991

全部回覆(2)
P粉770375450

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

P粉493534105

簡而言之,這是因為您呼叫.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。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板