Promise - Promise Chain | Hao's F2E World

文章目的

介紹 Promise Chain 運作邏輯，以及較進階的用法。

Promise Chain

Promise Chain 就是執行 Promise 的鏈接概念，在 Promise - 如何運用 Promise 處理非同步事件中有簡單提到 Promise 解決了 call back hell 的困境，那其實用上的就是 Promise 的鏈接方法。

這邊我們來了解一下 Promise Chain 一些的使用邏輯，先來看看範例：

function fn (n) {
  return new Promise ((resolve, reject) => {
    setTimeout(() => {
      if (n) {
        resolve('success')
      } else {
        reject('fail')
      }
    }, 0)
  })
}

fn (1)
  .then((res) => {
    console.log('success:', res)
    return fn (2)
  })
  .then((res) => {
    console.log('success2:', res)
    return fn (3)
  })
  .then((res) => {
    console.log('success3:', res)
  })
  .catch((err) => {
    console.log('error:', err)
  })

上面的範例就是一個簡單的 Promise Chain，fn 透過 then 接收成功的結果，並在得到結果後，透過 return 繼續執行 fn，在上面執行三次 fn 後，我們可以得到完整的三個執行成功結果，但如果我們把程式碼變成下面這樣又會如何呢？

fn (1)
  .then((res) => {
    console.log('success:', res)
    return fn (0) // 將 2 改成 0
  })
  .then((res) => {
    console.log('success2:', res)
    return fn (3)
  })
  .then((res) => {
    console.log('success3:', res)
  })
  .catch((err) => {
    console.log('error:', err)
  })

執行結果會變成成功結果只有一次，然後出現 error 的結果，原因是我們執行 fn(1) 時沒有問題，但是在執行第二次時我們傳入 0 導致 Promise 回傳錯誤，當錯誤一回傳 Promise 就會停下後續的執行。

當出現錯誤後如果想要繼續執行鏈接其實也是可以的，我們只需在 catch 底下 return 新的 Promise 執行即可：

fn (1)
  .then((res) => {
    console.log('success:', res)
    return fn (0)
  })
  .then((res) => {
    console.log('success2:', res)
    return fn (3)
  })
  .then((res) => {
    console.log('success3:', res)
  })
  .catch((err) => {
    console.log('error:', err)
    return fn (4) // 這邊做 return
  })
  .then((res) => {
    console.log('success4:', res)
  })

上面的程式碼，我們一樣可以看到 fn (4) 的執行結果。

then 接收失敗結果

在前面說過用 then 接收成功的結果，但如果今天想要不管成功與否都繼續執行後續的 Promise 呢？

那就可以使用 then 來接收失敗結果達到需求，來看看範例：

fn (1)
  .then((res) => {
    console.log('success:', res)
    return fn (2)
  }, (err) => {
    console.log('error:', err)
    return fn (3)
  })
  .then((res) => {
    console.log('message2:', res)
  })

上面的範例可以看到 then 裡面我們傳入了第二個 call back function，第一個 call back function 是接收成功的結果，第二個是接收失敗的結果，透過這樣的寫法無論是成功或是失敗都可以繼續執行後續的 Promise 囉！

參考資料

六角學院-JavaScript核心篇

文章目的

Promise Chain

then 接收失敗結果

相關連結

參考資料