嵌套的Promise執行順序
P粉459440991
2023-08-16 19:20:33
<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>
除了Nicholas的答案之外,你可能被標識符'res'的重複使用所困擾。在內部Promise中的第一次使用是作為回調函數,它將值2傳回給Promise。 最後一行中的第二次使用是在不同的作用域中,並且用作外部Promise的.then()方法的參數名稱。 如果你將最後一行中的'res'替換為'outerPromiseResult',可能會有所幫助,以澄清事情。
簡而言之,這是因為您呼叫
.then
的順序。在上面的程式碼中,我們進入了外部建構函數,它立即呼叫外部函數。然後建立內部Promise,呼叫內部函數。內部函數記錄“c”,然後將外部Promise解析為3,然後將內部Promise解析為2。
所以此時我們有2個已解析的Promise,但沒有嘗試使用它們的程式碼。
完成建構內部Promise後,我們在內部Promise上呼叫
.then
。由於Promise已解析,這會排隊一個微任務來運行。完成建構外部Promise後,我們在外部Promise上呼叫
.then
。由於Promise已解析,這會排隊一個微任務來運行。現在我們已經完成了所有同步程式碼的運行。呼叫堆疊為空,微任務開始運作。這些按照先進先出的順序執行,所以與內部Promise相關的微任務首先運行,記錄2。然後運行剩餘的微任務,記錄3。