ES6 Promise

同步於個人博客

1. 理解Promise
2. new Promise()
3. Promise.resolve()
4. Promise.reject()
5. Promise.prototype.then()
6. Promise.prototype.catch()
7. Promise.prototype.finally()
8. Promise.prototype.done()
9. Promise.all()
10. Promise.race()

---

異步編程的傳統解決方案是回調函數和事件，在複雜的邏輯中，很容易多層回調函數嵌套(CallBack Hell)
Promise 是一種新的解決方案，幫助開發者擺脫多層回調函數嵌套問題

理解Promise

Promise即承諾，即答應未來會做某件事。在未來某個時間，這個承諾可能會實現，也可能會被拒絕。
例如：A承諾(promise)B，十年後娶B。在這十年裏，這個承諾的狀態是進行中(pending)。十年後，如果A娶B，這個承諾就實現(狀態變爲resolved)了。如果A不娶B，這個承諾就被拒絕(轉態變爲rejected)了。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (AMarryB) {
      resolve()
    } else {
      reject()
    }
  }, tenYear)
})

B說：十年後如果A娶B(承諾resolved)，B就給A生猴子；如果A不娶B(承諾rejected)，B就給嫁給C；但無論如何(finally)，B都愛着A。

promise.then(() => {
  // 十年後，A娶了B
  BMakeMonkeyWithA()
}).catch(() => {
  // 十年後，A不娶B
  BMarryC()
}).finally(() => {
  // 無論如何
  BStillLoveA()
})

new Promise()

創建一個Promise實例

const promise = new Promise((resolve, reject) => {
  
})

Promise.resolve()

把Promise實例的狀態由pending轉化爲resolved，可以傳參
也可以把普通對象轉化爲Promise對象，並立即轉化爲resolved狀態

const promise = new Promise((resolve, reject) => {
  // some async code here
  resolve(param1)
})

Promise.reject()

把Promise實例的狀態由pending轉化爲rejected，可以傳參
也可以把普通對象轉化爲Promise對象，並立即轉化爲rejected狀態

const promise = new Promise((resolve, reject) => {
  // some async code here
  reject(param2)
})

Promise.prototype.then()

Promise實例的回調函數，Promise實例的狀態發生變化時調用。
有兩個參數：
第一個參數是狀態變爲resolved的回調，接收resolve()傳遞的參數；
第二個是狀態變爲rejected的回調，接收reject()傳遞的參數；
第二個參數是可選的。

promise.then((param1) => {
  // resolve()的回調
  // do some thing here
}, (param2) => {
  // reject()的回調
  // do some thing here
})

Promise.prototype.catch()

Promise實例狀態變爲rejected的回調，
.then(null, rejectCallBack)的別名，
接收reject()傳遞的參數。

promise.catch(param2 => {
  // reject()的回調
  // some code here
})

Promise.prototype.finally()

只要狀態發生變化，就會執行
有一個回調參數，處於鏈式的末端
ES2018引入標準

promise
  .then()
  .catch()
  .finally(() => {
    // 不接收任何參數
    // some code here
  })

Promise.prototype.done()

捕捉可能出現的錯誤，並向全局拋出
處於鏈式的末端
可以有回調參數，也可以沒有

promise
  .then()
  .catch()
  .done()

Promise.all()

將多個Promise實例包裝成一個新的Promise實例
接收一個數組作爲參數
數組的元素都是Promise實例
所有參數Promise實例狀態都變化爲resolved，該實例的狀態纔會變爲resolved，所有參數Promise實例都可以向該實例傳參，這些參數會被包裝成一個數組，傳給改實例
有一個參數Promise實例的狀態變爲rejected，該實例的狀態立即變爲rejected，率先發生狀態變化的參數Promise實例，可以把參數傳給該實例
例如：猴王承諾花十年時間同時和三千妃嬪生猴子，十年後，最聰明的小公猴立爲太子，最漂亮的小母猴立爲公主，但是如果發現有的小猴子不像猴王，承諾作廢。

const promise = Promise.all([ makeMonkeyWith1, makeMonkeyWith2, ...])
promise
  .then(monkeys => {
    // monkeys是所有小猴子的數組
    monkeys.map(monkey => {
      if(isMale(monkey) && isMostClever(monkey)) {
        bePrince(monkey)
      } else if (isFemale(monkey) && isMostBeautiful(monkey)) {
        bePrincess(monkey)
      } else {
        beGone(monkey)
      }
    })
  })
  .catch(error => {
    monkeyKingHadGreenHats()
  })

Promise.race()

將多個Promise實例包裝成一個新的Promise實例
接收一個數組作爲參數
數組的元素都是Promise實例
任何一個參數Promise實例狀態發生變化，都會改變該實例的狀態
率先發生狀態變化的參數Promise實例，可以把參數傳給該實例
例如：猴王承諾同時和三千妃嬪生猴子，第一個出生的如果是公猴立爲太子，如果是母猴立爲公主。

const promise = Promise.race([ makeMonkeyWith1InTenYear, makeMonkeyWith2InTenYear, ...])
promise
  .then(monkey => {
    // monkey是第一個出生的小猴子
    if(isMale(monkey)) {
      bePrince(monkey)
    } else if (isFemale(monkey)) {
      bePrincess(monkey)
    } else {
      beGone(monkey)
    }
  })
  .catch(error => {
    neverBelieveInLove()
  })