快捷導(dǎo)航

JavaScript中Promise的執(zhí)行順序詳解

更新時(shí)間：2022年01月26日 10:30:50 作者：自然醒

Promise 是 JS 中進(jìn)行異步編程的新的解決方案(舊的是純回調(diào)形式) ,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise執(zhí)行順序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近看到一個(gè) Promise 相關(guān)的很有意思的代碼：

new Promise((resolve) => {
  console.log(1)
  resolve()
}).then(() => {
  new Promise((resolve) => {
    console.log(2)
    resolve()
  }).then(() => {
    console.log(4)
  })
}).then(() => {
  console.log(3)
})

第一次看到這個(gè)代碼的時(shí)候，以為的輸出結(jié)果會(huì)是：1,2,3,4，但是被實(shí)際的輸出結(jié)果打臉。

如圖所示，實(shí)際的輸出結(jié)果為：1,2,4,3。

代碼分析

為了搞清楚實(shí)際的輸出結(jié)果為什么是：1,2,4,3，我們來一步步分析代碼的執(zhí)行。

我們知道，Promise 實(shí)例化時(shí)，傳入的回調(diào)會(huì)立即執(zhí)行，而Promise 的 then 回調(diào)會(huì)被放到微任務(wù)隊(duì)列中，等待執(zhí)行。隊(duì)列就是一個(gè)先進(jìn)先出的列表，先被放到隊(duì)列的回調(diào)，會(huì)被優(yōu)先執(zhí)行。前面的代碼中，一共有 5 個(gè)回調(diào)函數(shù)。

回調(diào)1 是 Promise 實(shí)例化時(shí)的回調(diào)，所以會(huì)立即執(zhí)行，此時(shí)控制臺(tái)打印出數(shù)字 1，然后 resolve() 方法被調(diào)用，此時(shí)的 Promise 狀態(tài)被修改成了 fulfilled（如果沒有調(diào)用 resolve() 方法，Promise 的狀態(tài)為 pending）。

Promise 實(shí)例化完成后，第一個(gè) then() 方法被調(diào)用，回調(diào)2 會(huì)被放入了微任務(wù)隊(duì)列中，等待執(zhí)行。

then 方法何時(shí)調(diào)用？

這個(gè)時(shí)候疑問點(diǎn)來了，第一個(gè) then() 方法被調(diào)用后，第二個(gè) then 方法會(huì)不會(huì)馬上被調(diào)用，如果會(huì)，那輸出的結(jié)果就應(yīng)該是：1,2,3,4。顯然，此時(shí)不會(huì)馬上調(diào)用第二個(gè) then() 方法，也就是不會(huì)馬上將回調(diào)5 放入微任務(wù)隊(duì)列。那如果不會(huì)，那何時(shí)才會(huì)被調(diào)用？

這個(gè)時(shí)候，需要看一下 Promise/A+ 規(guī)范。重點(diǎn)是下面幾條：

2.2 then 方法 promise 的 then 方法接受兩個(gè)參數(shù)：

promise.then(onFulfilled, onRejected)

2.2.2 如果 onFulfilled 是函數(shù)：

2.2.2.1 當(dāng) promise 處于已處理狀態(tài)時(shí)，該函數(shù)必須被調(diào)用并將 promise 的值作為第一個(gè)參數(shù)。
2.2.2.2 該函數(shù)一定不能在 promise 處于已處理狀態(tài)之前調(diào)用。
2.2.2.3 該函數(shù)被調(diào)用次數(shù)不超過一次。

2.2.6 then 可以在同一個(gè) promise 上多次調(diào)用。

2.2.6.1 如果 promise 處于已處理狀態(tài)時(shí)，所有相應(yīng)的 onFulfilled 回調(diào)必須按照它們對(duì) then 的組織順序依次調(diào)用。
2.2.6.2 如果 promise 處于已拒絕狀態(tài)時(shí)，所有相應(yīng)的 onRejected 回調(diào)必須按照它們對(duì) then 的組織順序依次調(diào)用。

2.2.7 then 必須返回一個(gè) promise。

promise1 = new Promise(resolve => resolve())

// promise1 可以多次調(diào)用 then
// 且 onFulfilled 回調(diào)的執(zhí)行順序，按照 .then 的調(diào)用順序執(zhí)行
promise1.then(onFulfilled1) // 1
promise1.then(onFulfilled2) // 2
promise1.then(onFulfilled3) // 3
// 上面 3 個(gè) onFulfilled，按照 1、2、3 的順序執(zhí)行

// 調(diào)用 .then 方法后，返回一個(gè)新的 promise
promise2 = promise1.then(onFulfilled, onRejected);

綜上，第一個(gè) then() 方法調(diào)用后，會(huì)返回一個(gè)新的 Promise。這樣做的目的就是為了保持鏈?zhǔn)秸{(diào)用，而且 then() 方法內(nèi)的 onFulfilled 回調(diào)會(huì)等待 Promise 狀態(tài)修改之后才會(huì)調(diào)用。

我們稍微修改一下前面代碼的調(diào)用形式，如下：

const p1 = new Promise((resolve) => {
? console.log(1)
? resolve()
})

const p2 = p1.then(() => {
? new Promise((resolve) => {
? ? console.log(2)
? ? resolve()
? }).then(() => {
? ? console.log(4)
? })
})

const p3 = p2.then(() => {
? console.log(3)
})

p1.then() 會(huì)返回一個(gè)新的 Promise 命名為 p2，后面的 p2.then() 的回調(diào)會(huì)在 p1.then() 內(nèi)的回調(diào)函數(shù)執(zhí)行完之后，才會(huì)調(diào)用，也就是 p2 這個(gè) Promise 狀態(tài)發(fā)生改變之后。

所以，只有回調(diào)2 執(zhí)行完成后，才會(huì)執(zhí)行 p2.then()。我們?cè)倏?回調(diào)2 的內(nèi)容。

回調(diào)2 先是對(duì)一個(gè) Promise 進(jìn)行了實(shí)例化操作，實(shí)例化的回調(diào)為回調(diào)3 ，該回調(diào)會(huì)立即執(zhí)行，此時(shí)控制臺(tái)打印出數(shù)字 2，然后 resolve() 方法被調(diào)用，此時(shí)的 Promise 狀態(tài)被修改成了 fulfilled，后面的回調(diào)4 會(huì)放入微任務(wù)隊(duì)列?；卣{(diào)2 執(zhí)行完畢后，執(zhí)行 p2.then()，回調(diào)5 被放入微任務(wù)隊(duì)列。

按照隊(duì)列先進(jìn)先出的執(zhí)行順序，先執(zhí)行回調(diào)4，然后執(zhí)行回調(diào)5。所以，在控制臺(tái)會(huì)先輸出數(shù)字 4，然后輸出數(shù)字 3。

如果想要輸出的結(jié)果為：1,2,3,4，可以將代碼改成如下形式：

const p1 = new Promise((resolve) => {
? console.log(1)
? resolve()
})

p1.then(() => {
? new Promise((resolve) => {
? ? console.log(2)
? ? resolve()
? }).then(() => {
? ? console.log(4)
? })
})

p1.then(() => {
? console.log(3)
})