JavaScript 核心觀念(77) - Promise - 常用技巧

發表於 2022-05-08 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

接下來將會針對 Promise 介紹一些常用的 Promise API。

前言

接下來將會針對 Promise 介紹一些常用的 Promise API。

常用技巧

首先哪些是常用的 Promise API 呢？以下列出來所謂常見的定義就是「我們在實務開發上很常使用到的語法」。

那麼有哪些呢？分別是以下

Promise.all
Promise.race

首先我們先來看 Promise.all 語法的部分，先讓我們看一下範例程式碼

const promise = (boolean) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(boolean) {
        resolve('resolve');
      } else {
        reject('reject')
      }
    }, 1000)
  })
}

Promise.all([promise(true), promise(true), promise(true)])
  .then((res) => {
    console.log('res', res);
  })

我們可以看到 Promise.all 所傳入的會是一個陣列，因此它在回傳時也會是一個陣列

Promise.all

但是要注意一件事情就是 Promise.all 都有任一個發生 reject 時，就會全部進入 catch 唷。

而 Promise.race 呢？其實也寫法也很雷同

Promise.race([promise(true), promise(true), promise(true)])
  .then((res) => {
    console.log('res', res);
  })

但是 race 跟 all 最大差異在於，race 只要有一個成功就會立刻進入 then，而 all 則必須等全部都執行成功才會進入 all，因此這兩者是有一點差異的。

這一個系列也快要進入一個結束了，因此如果覺得看不過癮的話，可以考慮閱讀我先前寫的「JavaScript 中的 Promise 是什麼？以及為什麼你要懂 Promise」會有更多 Promise 介紹。

參考文獻

JavaScript 核心篇