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

發表於 2022-04-17 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

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

前言

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

Promise Chain

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

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，而且是可以無限接下去的

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

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

promise(true)
  .then((resolve) => {
    console.log('resolve', resolve)
    return promise(true)
  })
  .then((resolve) => {
    console.log('resolve', resolve)
  })

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

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

promise(true)
  .then((resolve) => {
    console.log('1')
  })
  .then(() => {
    console.log('2')
  })

必定會執行

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

promise(true)
  .then((resolve) => {
    console.log('1')
    return {
      myName: 'Is Ray Not Array',
    }
  })
  .then((res) => {
    console.log('2', res)
  })

任何東西都可以傳遞

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

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 就可以囉

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 的，分別是成功與失敗的結果

promise(false)
  .then(
    (resolve) => {
      console.log('resolve', resolve)
    },
    (reject) => {
      console.log('reject', reject)
    }
  )

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

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 的唷~

參考文獻

JavaScript 核心篇