JavaScript 核心觀念(76) - Promise - 鏈接技巧

前言

接下來針對 Promise 中的一個概念,也就是 Promise Chain 鏈接技巧繼續說明。

Promise Chain

Promise Chain 也就是 Promise 鏈接串連概念,而這邊會使用到剛剛前面的範例程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const promise = (boolean) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(boolean) {
resolve('resolve');
} else {
reject('reject')
}
}, 1000)
})
}

promise(true)
.then((resolve) => {
console.log('resolve', resolve);
}).catch((reject) => {
console.log('reject', reject);
})

那麼什麼是 Promise Chain 是什麼呢?簡單來講就是在 then 可以繼續往下接下一個 then,而且是可以無限接下去的

1
2
3
4
5
6
7
promise(true)
.then((resolve) => console.log('resolve', resolve))
.then(() => { ... })
.then(() => { ... })
.then(() => { ... })
.then(() => { ... })
.then(() => { ... })

但實務開發來講,我們常常需要依照順序執行,例如來講 A 必須先執行,執行完畢後才執行 B 以此類推,那麼在 Promise 上就只需要補上一個 return 就可以將結果往下一個 then 去接收資料

1
2
3
4
5
6
7
8
promise(true)
.then((resolve) => {
console.log('resolve', resolve)
return promise(true)
})
.then((resolve) => {
console.log('resolve', resolve)
})

這樣子就可以將第二個 promise 結果往第二個 then 傳遞。

但是這邊有一個小小的注意事項要注意,不論你是否要將結果往下一個 then 傳遞,只要你有串接 then,那麼就必定會執行,而且是無法跳離的

1
2
3
4
5
6
7
promise(true)
.then((resolve) => {
console.log('1')
})
.then(() => {
console.log('2')
})

必定會執行

當然不只是可以 return Promise 到下一個 then,而是任何表達式都可以被往下傳遞

1
2
3
4
5
6
7
8
9
10
promise(true)
.then((resolve) => {
console.log('1')
return {
myName: 'Is Ray Not Array',
}
})
.then((res) => {
console.log('2', res)
})

任何東西都可以傳遞

但是這邊要注意若 Promise 發生 reject 的話,就會直接往 catch 跳,而不會往其他 then 運作

1
2
3
4
5
6
7
8
9
10
11
12
promise(false)
.then((resolve) => {
console.log('1')
return {
myName: 'Is Ray Not Array',
}
})
.then((res) => {
console.log('2', res)
}).catch((err) => {
console.log('err', err);
})

reject

但是如果你想要從 catch 繼續往下運作的話也是可以,直接在後面 catch 並補上 then 就可以囉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
promise(false)
.then((resolve) => {
console.log('1')
return {
myName: 'Is Ray Not Array',
}
})
.then((res) => {
console.log('2', res)
}).catch((err) => {
console.log('err', err);
return promise(true)
}).then((res) => {
console.log('3', res)
})

繼續執行

但是其實你知道 then 是可以傳入兩個 callback function 的,分別是成功與失敗的結果

1
2
3
4
5
6
7
8
9
promise(false)
.then(
(resolve) => {
console.log('resolve', resolve)
},
(reject) => {
console.log('reject', reject)
}
)

那麼透過 then 特性來講,不管成功與否都不會因為失敗而跳進 catch,並且絕對可往下執行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
promise(true)
.then(
(resolve) => {
console.log('resolve', resolve)
return promise(false)
},
(reject) => {
console.log('reject', reject)
return promise(true)
}
)
.then(
(resolve) => {
console.log('resolve', resolve)
return promise(false)
},
(reject) => {
console.log('reject', reject)
return promise(true)
}
)

必定執行

只是這種寫法我們是比較少見而已,可是如果遇到特殊需求時,是可以善加利用 then 的唷~

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ