promise(3) '靜態'方法_ZenDei技術網路在線

一直恐懼讀源碼，哪怕是一個簡單的庫也是讀百來行遇到難點就放棄了。對於新的東西也僅僅是知道它拿來乾什麼，社區資源在哪裡，要用時就突擊文檔資源使用即可。未有過深入之心，亦或者有過深入之心兩三天就廢掉。這兩日安靜下來思考，覺得自己毛病不少，卻還是不甘於平庸。那麼只能選擇面對自己做出改變，越是恐懼，越是應 ...

一直恐懼讀源碼，哪怕是一個簡單的庫也是讀百來行遇到難點就放棄了。對於新的東西也僅僅是知道它拿來乾什麼，社區資源在哪裡，要用時就突擊文檔資源使用即可。未有過深入之心，亦或者有過深入之心兩三天就廢掉。

這兩日安靜下來思考，覺得自己毛病不少，卻還是不甘於平庸。那麼只能選擇面對自己做出改變，越是恐懼，越是應該面對。下一篇就來個es6-promise代碼理解好了。加油吧少年！

3.1 Promise.reject()

Promise.reject()靜態方法,這個方法我在才開始用的時候老迷惑了，不知道什麼時候應該使用。直到我理解了then方法過後，就不迷惑了，接上一篇。看下圖代碼：

var aPromise = new Promise(function() {
    resolve(1)
});
var testPromise = aPromise.then(function onFulfilled() {
    //...一系列操作過後得到要接受的value 值
    return value
})

//或者

var aPromise = new Promise(function() {
    reject(1)
});
var testPromise = aPromise.then(null, onRejected() {
    //...一系列操作過後得到要接受的reason 值
    return reason
})

Promise.prototype.then執行它會返回一個新的promise對象,而這個新的promise對象的狀態值規則如下：

①var aPromise = new Promise(function(){ resolve(1)}); var testPromise = aPromise.then()//then沒有接收回調函數，新創建的testPromise 對象的[[PromiseStatus]]和[[PromiseValue]]與之前的aPromise 的一樣。

②then方法接收的回調函數執行return 值只為普通對象或者原始類型，即將普通對象或者原始類型值賦給新創建的promise對象[[PromiseValue]],新創建的promise對象的[[PromiseStatus]]就等於調用then的那個promise對象的[[PromiseStatus]]。

③then方法接收的回調函數執行return值為promise對象，即將promise對象的[[PromiseValue]]和[[PromiseStatus]]賦值給新創建的promise對象對應屬性值。

④then方法接收的回調函數執行return值為thenable對象，即執行對象的then方法，根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]]，賦值給新創建的promise對象對應屬性值。

then函數最後調用了onRejected 或者 onFulfilled返回的promise對象需要把rejected狀態傳遞下去（傳遞給後續進行處理）此時需要使用Promise.reject。（舉個例子看下圖代碼）

// Request.get()是一個發起請求，當有數據返回或請求出錯時生成一個promise對象
// res為後臺成功返回的數據，msg為失敗或錯誤返回的數據
axios.get(url).then((res) => {
    if (res.code == 0) {
        //當code的值為0 時判定這個是成功的需要處理的數據
        return res;
    } else {
        //當code的值不為0時，就需要返回一個rejected的promise對象供後續處理
        return Promise.reject(res));
    }
}, (msg) => {
    //通常是請求出錯需要返回一個rejected的promise對象，供後續處理
    return Promise.reject(msg);
});

如圖中代碼，當需要把錯誤拋出給後續做處理的時候，通常會return Promise.reject("原因")給後續的代碼來處理(此時的錯誤可以是我們與後臺約定的錯誤碼，而不一定是代碼上的錯誤)。

Promise.reject()執行後返回的結果又是什麼了？

①reject,中不接收值時返回一個rejected狀態的promise對象[[PromiseValue]]值為undefined

②reject中接收普通值和對象，會作為返回的rejected狀態的promise對象的[[PromiseValue]]值。

//創建一個 thenable 對象
var thenable = {
    then(resolve, reject) {
        reject('錯誤原因');
    }
};
//將 thenable 作為參數使用
var testC = Promise.reject(thenable);
// 此處判定 e 與  thenable
testC.catch(e => {
    console.log("我居然是接受進來的thenable對象",e === thenable)
})

③reject中接收thenable 對象，直接作為返回的rejected狀態的promise對象的[[PromiseValue]]值。（此處可以在控制台輸出testC，查看他的結構）

④reject中接收thenable 對象，直接作為返回的rejected狀態的promise對象的[[PromiseValue]]值。（看上圖）

Promise.reject()方法接受的參數，會原封不動地作為reject的理由，成為新promise對象的[[PromiseValue]]值（厲害了一點轉化都不會做，廢話如果rejected狀態可以變化，還要Promise.reject()有何有）。

總結：Promise.reject()返回一個使用接收到的值進行reject的新的promise對象。（promise對象是rejected的喲）

3.2 Promise.resolve()

Promise.resolve 一個作用就是將 thenable 對象轉換為promise對象。同理Promise.resolve 方法是創建promise對象的快捷方式。

thenable指的是一個具有 .then 方法的對象。目前我們最常見的 thenable對象就是jQuery.ajax()

1.當接受一個普通對象或值的時候

Promise.resolve返回的是一個將該對象作為值的新promise對象。

2.接受一個thenable對象的時候

執行thenable的then方法，根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]]，然後將值賦給新的promise對象。

3.接收到promise對象參數的時候

返回的還是接收到的promise對象

3.3 Promise.all()

突然想什麼場景下適合使用Promise.all，Promise.all簡單描述它接收一個 promise對象的數組作為參數，當這個數組裡的所有promise對象全部變為fulfilled或有對象變為rejected狀態的時候，它就會去調用 .then 方法。

1.當接受到promise對象數組都fulfilled

Promise.all([testA，testB，testC]).then() ,接受的數組中testA，testB，testC會同時執行，promise對象只會狀態遷移一次，所以testA，testB，testC，有fulfilled狀態的就等待其他的promise對象狀態遷移完成，然後在返回一個新的promise對象，then方法接受的參數是Promise.all接受到的promise對象resolve的值組成的數組，所以then接收的數組是類似[testAresolveValue, testBresolveValue, testCresolveValue]），數組順序跟接收的promise對象數組順序一致。

2.當接受到promise對象數組有rejected

Promise.all([testA，testB，testCReject]).then() ,它的執行跟前面場景一致，不同在數組中有promise對象rejected狀態就會執行.then方法。其它數組中還沒狀態遷移的promise對象還會執行，只是和後續的鏈式操作沒有什麼關係了。

總結：Promise.all接受的數組，數組中的promise對象都fulfilled，Promise.all返回的新promise才會是fulfilled狀態的，只要數組中有一個promise對象是rejected狀態，Promise.all返回的新promise會是rejected狀態的。但是數組中的promise對象都會狀態遷移到穩定（也就是說數組中有promise對象rejected狀態就會執行.then方法。但其它數組中還沒狀態遷移的promise對象還會執行的，比如上圖中"執行了C"是在"B：32"之後輸出的）;Promise.all 適用的場景是多個非同步條件需要同時滿足才執行後續操作的情況。

3.3 Promise.race()

Promise.race()跟Promise.all()使用方法一致，接收一個promise對象數組為參數，但不同的是Promise.race()接收的promise對象數組中有一個promise對象進入 FulFilled 或者 Rejected 狀態的話，就會執行.then繼續進行後面的處理(就像比賽一樣誰先到達，誰就接著後續操作)。

第一個promise對象變為確定（FulFilled）狀態後，數組中其它的promise對象還是會繼續運行的，所有手續輸出了“執行了：B”,“執行了：C”。

總結：Promise.race()接收的數組中的promise對象存在競爭關係，比如同時向兩個不同介面拿相同數據，哪個介面先返回數據，就先使用該數據做後續操作。也可以做超時限制如下圖（附帶碼）。

function timeOut(time) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject('timeOut');
        }, time)
    })
}

function promiseURL(){
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject('get Date from promiseURL');
        }, 1000)
    })
}

Promise.race([promiseURL(), timeOut(2000)]).then(function(values) {
    console.log(values); // get Date from promiseURL
},function(res) {
    console.log(res); // timeOut  
})

View Code

3.4 總結

終於把這篇結尾了，還好這個周時間充足，準備把前面兩篇修改整理一下，順帶做做es6-promise源代碼理解筆記。

~~~~~~~~~總結好像簡單了點喲~~~~~~~~~~~~~~~哈哈哈哈哈~~~~~~~~~~~打完收工~~~~~~~~~

睡覺。