目錄

• Promise
• 為什麼要用Promise
• then & catch
• all & race
• 📖參考資料

Promise

Promise代表一個可能成功或失敗的非同步操作，它有3種狀態－pending、fulfilled、rejected

Promise可以透過new建立，且他會接收一個callback，這個callback被稱作executor function(執行器函式)，它是同步的。

executor function引數為兩個函式－resolve、reject，前者在非同步成功時被呼叫，後者則在失敗時

new Promise((resolve, reject) => {
  resolve('abc'); // Promise {<fulfilled>: 'success'}
                  // [[Prototype]]: Promise
                  // [[PromiseState]]: "fulfilled"
                  // [[PromiseResult]]: "abc"

}).then((successVal) => {
  console.log(successVal); // abc

})

為什麼要用Promise

為什麼不用callback處理非同步就好，因為那樣會變成callback hell。

而Promise的Promise鍊和只要一個catch就可以處理所有錯誤(exception和error)的特色能解決這個問題。

foo((result) => {
  fooSecond(result, (newResult) => {
    fooThird(newResult, (finalResult) => {
      console.log(finalResult);

    }, failureCallback);
  }, failureCallback);
}, failureCallback);

// 使用Promise鍊避免callback hell
// ES8變成語法糖－async、await

foo().then((newResult) => {
  return fooSecond(result);

}).then((finalResult) => {
  return fooThird(finalResult);

}).catch(() => {
  console.log('error');

});

then & catch

用於將多個Promise串在一起，且可以自訂順序

• then

  • 主要用於處理fulfilled的Promise，回傳Promise。雖然也可處理reject的，但不推薦
  • then的callback不會被當作同步呼叫，因為那樣的話就會變得比非同步還早執行。它的callback會先被丟到micro task的event queue直到call stack空了才取出

• catch

  • 處理rejected的Promise，並回傳Promise
  • then(null, failCallback)的簡寫

all & race

用於控制Promise。引數為裝了Promise的陣列，回傳Promise。

• all

  • 全部完成才會return並執行then的callback，且只要一個失敗就會跳到catch

  • 並行(concurrentl)操作Promise，可搭配.map()使用，透過map可先把Promise物件都建立起來，而Promise建立好後就會開始處理

    

    function foo(packageName){
      return fetch(`https://api.github.com/orgs/${packageName}`)
      .then(d => {
        console.log(`${packageName} done.`)
        return d.json();
      })
    }
    
    Promise.all(['bootstrapvue', 'tailwindcss', 'vuejs'].map(foo)).then(d => {
      console.log(d);
    });
    

• race

  • 其中一個完成就return並執行then或catch的callback，如果有同時完成的Promise則回傳index小的那個

📖參考資料

MDN - Promise
現代化的 JavaScript 併發 - Promises
async functions - make promise friendly