1. 程式人生 > >promise(3) '靜態'方法

promise(3) '靜態'方法

變化 bre 不一定 func npe 請求 時間 ole ios

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

這兩日安靜下來思考,覺得自己毛病不少,卻還是不甘於平庸。那麽只能選擇面對自己做出改變,越是恐懼,越是應該面對。下一篇就來個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源代碼理解筆記。

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

睡覺。

promise(3) '靜態'方法