關於 Promise 的喚起順序

前言

  這次是續上次的 初探 Promise 後再次學習 Promise  ，上次並沒有把 then() 與 catch() 用的比較複雜，事實上是可以做出很複雜的喚起，要做複雜的喚起時，順序就很重要，在此把學習的過程做個紀錄。

內容

  範例如下

function promise(val) {
  return new Promise((resolve, reject) => {
    if (val != 0) 
    	resolve('成功');
    else
    	reject('失敗');
  });
}
//
promise(1)
  .then(success => {
    console.log(success);
    console.log(`then block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 1`);
    return promise(0);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 2`);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 1`);
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
//
// "成功"
// "then block 0"
// "成功"
// "then block 1"
// "失敗"
// "catch block 0"
// "成功"
// "then block 2"
// "It's done"
// "finally block "

這次的範例是將 初探 Promise 裡的範例做一些改變來組成， promise() 需要輸入一個值來決定成功或失敗， 初探 Promise 的範例把 catch() 放最後可能會讓人誤會 catch() 一定放最後，但 Promise 其實是可以多次 catch() 的，範例在"then block 1"裡蓄意失敗，這個時候會跳到"catch block 0"，"catch block 0" 由於成功，所以跳到"then block 2"，這次範例還多了個 finally() 這個才是一定要放最後的，只要 Promise 執行完就一定會執行，不論是成功或失敗！這次要注意"catch block 0" 的最後要再喚起 promise() ，這樣才能接到"then block 2"或"catch block 1"，"then block 2"或"catch block 1"的最後都不需要再喚起 promise() ，如果有喚起的話，就需要更多的 then() 與 catch() 來承接。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

[ developer.mozilla.org ] 使用 Promise

相關文章與資料

初探 Promise