[ ES6 ] 進階篇（一） —— 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 相關語法的，對於看文檔困難的不推薦看