Promise 筆記

— 是ES6內建語法

— 用來處理非同步請求 (asynchronous request)

狀態

promise 共有三種Status

  • pending — 等待、擱置的狀態。為初始化狀態
  • fulfilled — 請求成功
  • rejected — 請求失敗

描述

一個Promise物件會以成功 (fulfilled)或失敗 (rejected)來表示最後結果。

圖取自https://developer.mozilla.org

語法:

new Promise( function(resolve, reject) {} )

ES6:

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

Example:

建立一個Promise:
var hasFinished = true/false
var taskStatus = new Promise((resolve, reject) => {
if (hasFinished) {
var info = {
date: '2018/08/26',
id: '0826',
name: 'practice'
}
resolve(info)
} else {
var reason = new Error('in progress')
reject(reason)
}
})
使用Promise

Promise.prototype.catch(onRejected)

var checkTheTask = () => {
taskStatus
.then(res => {
console.log(res) // 表示成功
})
.catch(err => {
console.log(err.message) // 表示失敗
})
checkTheTask();

也可以改寫成:Promise.prototype.then(onFulfilled, onRejected)

var checkTheTask = () => {
taskStatus
.then(res => {
console.log(res) // 表示成功
}, error => {
console.log(err.message) // 表示失敗
})
checkTheTask();

CallBack vs ES 6 Promise

Promise 優點
  • 簡化非同步請求的操作
  • 用 fullfilled 和 rejected 兩種狀態來表示結果,一旦狀態從 pending 變成這兩種狀態後就不可以再改變了
  • 當 Promise 出錯,可用 catch 來接收 error
Promise 缺點
  • 無法取消 Promise,一旦建立,就會立刻執行,無法中途取消。
CallBack 缺點
  • 要用多層的 Callback 來完成非同步請求
  • 因為多層 Callback 緣故,一旦某一個 Callback 發生錯誤,會很難找出是哪一層出問題。這就是以前時常聽到的 Callback Hell