0%

Promise - Promise 使用方法

文章目的

了解 Promise 常用方法與使用情境。

Promise.all

某些情況下,我們會需要等到多個 Promise 執行完後,才執行其他行為,例如:等待 2 隻 api 的資料回傳後,再整理資料呈現於畫面上。

這種情況下,我們就可以利用 Promise.all 來確保行為是在多個 Promise 執行完後接續執行。

來看看範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function fn (n, time) {
return new Promise ((resolve, reject) => {
setTimeout(() => {
if (n) {
resolve('success')
} else {
reject('fail')
}
}, time)
})
}

Promise.all([
fn(2, 1000),
fn(3, 2000)
])
.then((res) => {
console.log('success:', res)
})
.catch((err) => {
console.log('error:', err)
})

上面範例中透過 Promise.all 的陣列傳入兩個 fn 且 time 分別為一秒跟兩秒,在這邊我們會透過 then 得到 ['success', 'success'],這個陣列是由兩個 fn 執行完後的結果組成的,雖然時間不同,但因為 Promise.all 的關係會等到所有 Promise 執行完後再一次把結果回傳。

**這邊要注意的地方是,放在 Promise.all 中的 Promise 只要有其中一項失敗,就會直接進入 catch**。

Promise.race

Promise.race 寫法和 Promise.all 一樣,差別在於 Promise.race 只回傳第一個結果,來看一下範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function fn (n, time) {
return new Promise ((resolve, reject) => {
setTimeout(() => {
if (n) {
resolve('success')
} else {
reject('fail')
}
}, time)
})
}

Promise.race([
fn(2, 1000), // 時間較少,因此會回傳此 Promise 結果
fn(3, 2000)
])
.then((res) => {
console.log('success:', res)
})
.catch((err) => {
console.log('error:', err)
})

error 也是一樣的道理,若是在發生 error 的 Promise 執行之前就已經得到結果,那 error 並不會被回傳,除非 error 是發生在最早的時候。

系列連結

Promise - 如何運用 Promise 處理非同步事件
Promise - Promise 運作概念
Promise - Promise Chain


參考資料

六角學院-JavaScript核心篇