promise(3) '靜態'方法

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

這兩日安靜下來思考，覺得自己毛病不少，卻還是不甘於平庸。加油吧少年！

 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對象的狀態值規則如下：

⑴.調用then方法會返回的promise是新創建的

⑵.這個新創建promise的值跟前一個promise的onFulfilled和onRejected的函數內部有無return 以及return的值有關系。如果沒有return則返回一個狀態為fulfilled的或者rejected，[[PromiseValue]]（不同實現內部屬性不一定叫PromiseValue）為undefined的promise對象。

⑶.承接⑵如果有return，retuen 一個普通的object對象那么新創建promise對象的 [[PromiseValue]] 的值就等於 object。 如果 return 的是一個Promise對象，還是會返回一個新的promise對象，且屬性值[[PromiseValue]]和[[PromiseStatus]]與return 的Promise對象屬性值一樣

⑷.如果有return，retuen 一個普通的thenable對象，會先執行thenable對象的then方法，得到[[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));
    }
});

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

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

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

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

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

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

 

④Promise.reject() 一個普通的promise 對象

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  
})

 

 3.4 總結

終於把這篇結尾了，還好這個周時間充足，順帶做做es6-promise源代碼理解筆記。

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

睡覺。