Hao's F2E World

我的前端小天地

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核心篇