[ ES6 ] 進階篇（一） —— Promise

yhtx1997發表於2019-02-16
Promise

Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。

什麼是 Promise

從使用上來說是一種語法糖，會了以後寫東西簡單一些
Promise 翻譯過來就是 承諾 諾言 約定 答應 的意思
那麼我是不是可以理解為它答應我會去做某件事，或者約好了會做某事
注：示例程式碼部分使用 jquery 示例

特點

  • 物件的狀態不受外界影響

promise 有三個狀態：待定(pending)，履行(fulfilled)，拒絕(rejected)。只有返回的結果可以影響狀態，其他任何操作不會影響到這個狀態。

//待定：初始狀態，既未履行也未拒絕。
//履行：意味著操作成功完成。
//拒絕：意味著操作失敗。

就像約會，說好了要約會，遵守了約定，有其他原因拒絕了約定。只有約會這件事中的彼此才能決定是遵守還是拒絕，其他人是決定不了的。

  • 狀態只會改變一次

Promise物件的狀態改變，只有兩種可能：成功(fulfilled)和失敗(rejected);只要改變了就會一直是這個結果。

還是約會，到了約會的時間之後結果就是肯定的了。別人第二天問起昨天約會去了嗎？也只會回答去了；或者沒去。是不可能說第一次回答去了，第二次回答沒去，第三次回答去了又沒去。

  • 新建 promise 就會立即執行，無法中途取消。
  • 如果不設定回撥函式，Promise內部丟擲的錯誤，不會反應到外部
  • 當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

引數

Promise有兩個引數名需要傳遞 resolve 和 reject ;分別用來返回成功和失敗，他們是兩個函式，只需要最後呼叫一下就行，不用自己去做操作

const promise = new Promise((resolve, reject) => {//約會定在下午2點
  // 為約會做準備

  if (/*到時間了*/){
    resolve(value);//都來了 遵守了約定
  } else {
    reject(error);//有事來不了了 拒絕了約定
  }
});

方法

Promise 原型方法

//原型方法使用方法
Promise.prototype.then();
//實際用的時候直接在 Promise 物件後使用方法的即可
let p = new Promise();
P.then();

then() //之後

它的引數是回撥函式，可以有兩個
第一個必填，表示成功了會執行的操作；第二個可以不填，表示失敗了會執行的操作（推薦至少有一個接收錯誤的方法被呼叫）

const promise = new Promise((resolve, reject) => {//約會定在下午2點；新建 Promise 物件
  // 為約會做準備；請求資料

  if (/*到時間了*/){
    resolve(value);//都來了 遵守了約定；返回成功後的值
  } else {
    reject(error);//有事來不了了 拒絕了約定；返回失敗的原因
  }
});
promise.then( value => {
  //遵守了約定，兩個人可以一起做點什麼；資料操作
}, error => {
  //拒絕了約定，自己一個人做點什麼；顯示錯誤資訊或者重試
});

catch() //捕獲

它的引數是一個回撥函式，表示失敗了會執行的操作（推薦使用 catch() 接收錯誤）

promise.catch( error => {
  //顯示錯誤資訊或者重試
});

finally() //最後

它的引數是一個回撥函式，表示不管是履行了約定還是拒絕了約定 最後都會執行的操作

promise.finally( () => {
  //執行完 Promise 後執行的操作
});

Promise 物件方法

//直接使用 Promise 關鍵字就可以呼叫方法
Promise.all();

all()

引數是 Promise 物件陣列或者陣列元素返回的都是 Promise 物件
當所有的 Promise 物件全都返回成功時，才會將所有成功的返回值傳遞給 then()
有一個返回失敗就會直接結束當前 Promise ,並將第一個失敗的返回值傳遞給 cath()

假如說有一系列資料要獲取這時就可以用 Promise.all()

//獲取 直接用 $.ajax() 是因為 $.ajax() 實際上返回的是 Promise 物件
Promise.all([
    $.ajax({url:`api/userInfo`}),
    $.ajax({url:`api/banner`}),
    $.ajax({url:`api/imagesUrl`})
]).then(arr=>{//全部成功才會呼叫
    let [userInfo1,userInfo2,userInfo3] = arr;
    console.log(userInfo1,userInfo2,userInfo3);
}).catch(err=>{//有一個失敗就終止並呼叫
    console.log(err);
});

reace()

引數是 Promise 物件陣列或者陣列元素返回的都是 Promise 物件
只要有一個返回了狀態不論是成功或失敗都會將值傳遞給 then()

這篇文章主要是自己用來快速查閱 Promise 相關語法的，對於看文件困難的不推薦看

相關文章