《es6標準入門》知識整理（5）- Promise

背景

早就在項目中使用過 promise，當時在用 angular 作項目的時候，也探尋過 promise 和 observable 的優劣。可是一直沒特別全面的去了解過 promise。如今在看關於 es6 標準的書，仍是順手把它的相關知識總結總結吧。

理解 Promise

Promise，像 observable 同樣，是異步編程的一種解決方案。它指的是在一個容器裏，保存着將來纔會獲得的事件結果。也就是說當事件的完成時間是不肯定或太長了的時候，咱們就能夠建立一個Promise來解決問題。好比咱們在獲取http請求的時候，因爲網絡或者各類各樣的因素，請求的時間比較慢，咱們也不能在當前就立刻請求到結果，此時咱們就能夠建立一個promise。

概述

promise對象，正如它的中文翻譯同樣「承諾」同樣，有如下兩個特色：

（1）對象狀態不受外界影響：一個 promise 對象有：pending→fulfilled→rejected 三種狀態。只有異步操做的結果能夠決定當前屬於哪一種狀態；

（2）一旦狀態改變，就不會再變；promise 對象狀態改變，只有：pending→fullilled（失敗）和pending→rejected（失敗）這兩種。只要這兩種狀態之一產生，就會一直保持這個結果，這時稱爲 resolved.

正由於有了 promise 對象，咱們能夠將異步操做以同步流程表達出來，避免了層層嵌套的回調函數。可是當某些事件不斷地反覆發生，用 observable 比部署 Promise 是更好地選擇。

基本用法

下面是一個promise實例：

const promise = new Promise(function (resolve, reject) {
    	if(success) {
    		resolve(value);
    	} else {
    		reject(error)
    	}
    });

可知，promise的兩個參數是 resolve 和 reject;

• resolve的做用：將 promis 的狀態從 pending→fulfilled,在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；

• rejected的做用：將 promise 的狀態從 pending→rejected，在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

promise 實例生成之後，能夠用 then 方法分別調用當 resolved 和 rejected 時的回調函數：

let promise = new Promise(function(resolve, reject) {
        console.log('Promise');// //@1
        resolve();
     });
     promise.then(function() {
         console.log('hh success');// @2
     });
     console.log('haha');// @3

輸出順序爲 @1→@3→@2; Promise 實例化後當即執行，因此最早輸出 @1，而後，then 方法指定的回調函數，會在當前腳本全部同步任務執行完纔會執行，因此 resolved 最後輸出。

其餘

• Promise.all():將多個Promise實例，包裝成一個新的Promise實例；

const p = Promise.all([p1,p2,p3]);
    // 數組裏的都是promise實例;
    // 當數組裏的promise實例狀態都爲fulfilled時，p的狀態纔是fulfilled，他們的返回值組成數組，傳遞給p的回調函數;
    // 當數組中有一個被rejected,p的狀態就變成rejected,此時第一個被reject的實例的返回值，被傳遞給p的回調函數。

• promise.race()

const p = Promise.race([p1,p2,p3]);
    //將多個promise實例，包裝成一個新的Promise實例，可是它和promise.all()不同。
    //它指的是，只要p1,p2,p3之中有一個實例率先改變狀態，p的狀態就跟着改變。
    //那個率先改變的Promise實例的返回值，就傳遞給 p的回調函數。
    //race是競爭的意思，由此也能夠區分兩個。

• promise.resolve()：將現有對象轉爲Promise對象;即返回會一個promise:

const jsPromise = Promise.resolve($.ajax('/whatever.json'));

應用

加載圖片：將圖片的加載寫成一個promise,一旦加載完成，promise的狀態會發生變化

const preloadImage = function (path) {
    	return new Promise(function (resolve,reject) {
    		const image = new Image();
    		image.onload = resolve;
    		image.onerror = reject;
    		image.src = path;
    	})
    }