Javascript基礎(chǔ)之-Promise

轉(zhuǎn)載自:http://www.lht.ren/article/3/
Promise是什么呢?根據(jù)ecma-262的定義:

Promise是一個被用于延時(shí)計(jì)算的最終結(jié)果的占位符

(A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.)

這個怎么理解呢

比如說,我要去麥當(dāng)勞買點(diǎn)吃的,下單以后人家會先給你一個訂單號,等人家外賣做好了,會提示你,并用那個訂單小票來換取你真正的食物,在這時(shí)候,那個訂單小票就是你這頓飯的占位符。

回到Promise,它有三種狀態(tài),分別為完成,拒絕和待決議,

而待決議的狀態(tài)代表它還沒有被完成或者是拒絕,也就是說,如果它一直都是處于待決議的狀態(tài),意味著代碼永遠(yuǎn)都不會繼續(xù)往下執(zhí)行

所以下面這段代碼永遠(yuǎn)都執(zhí)行不到finish

new Promise((resolve, reject)=> {

console.log('waiting');

document.writeln('waiting');

}).then((msg)=> {

console.log('finish');

});

也就是意味著,必須顯示的執(zhí)行resolve()或者是reject,程序才會繼續(xù)往下執(zhí)行。

那怎么解決這個問題呢,其實(shí)很簡單,決議一下就好了嘛,哈哈~~

或者給Promise設(shè)置一個超時(shí)時(shí)間,看下面的代碼:

function timeoutPromise(delay) {

return new Promise(function(resolve,reject){

setTimeout(function(){

reject("Timeout!" );

}, delay );

} );

}

Promise.race([

new Promise(()=> {

console.log('waiting...');

}),

timeoutPromise(3000)

]).catch((msg)=> {

console.log(msg);

})

這段代碼呢,會先等待5秒,然后會打印出一個錯誤"Timeout",在這里,Promise.race()實(shí)際上就是競態(tài)的,誰先決議,其余的就會被拋棄。所以咱們?nèi)腌姾鬀Q議一個拒絕,剩下那個promise自動被拋棄了

說到錯誤處理了,思考下面的代碼:

new Promise((resolve, reject)=> {

foo.bar();

}).then((msg)=> {

console.log(msg);

},null).then((msg)=> {

console.log(msg);

}, (err)=> {

console.log(err);

});

這段代碼,很明顯foo不是對象,所以會報(bào)ReferenceError,所以呢,會自動決議為reject,然后他緊接著的那個then沒有拒絕處理回調(diào),然后接著往下傳遞錯誤,直到有reject回調(diào)為止,假如一直都沒有reject回調(diào)呢,他就會在全局拋出一個未捕獲的異常。

那么如果在Promise決議多次呢,實(shí)際上只有第一次決議生效,也就是說,只能有一種決議生效,又成功又失敗,或者成功多次,失敗多次聽著就不靠譜是吧,思考下面的代碼

new Promise((resolve, reject)=> {

resolve();

reject();

console.log('exec finish');

}).then((msg)=> {

console.log('resolve');

}, (err)=> {

console.log('reject');

});

運(yùn)行結(jié)果是輸出exec finish 和resolve,因?yàn)榈谝淮螞Q議為resolve, 所以reject決議就被拋棄了

大家想一下,決議后對應(yīng)的then里面的回調(diào)函數(shù)是同步還是異步的呢,思考下面這個問題:

console.log(0);

let p = new Promise((resolve, reject)=> {

console.log(1);

resolve();

console.log(2);

})

console.log(3);

p.then((msg)=> {

console.log(4);

});

console.log(5);

他的結(jié)果是 1 2 3 5 4

答案很顯然啦,是異步的!實(shí)際上當(dāng)決議以后,就會把它放到一個異步隊(duì)列里調(diào)用

那為什么要這么設(shè)計(jì)呢,會給我們帶來什么好處呢,思考下面這個問題

function getResult() {

console.log(a);

}

function opt() {

if (isAsync) {

setTimeout(()=> {

getResult();

},0);

}else {

getResult();

}

}

var a = 0;

var isAsync = false;

opt();

a++;

isAsync = true;

opt();

a++;

他的結(jié)果輸出的是0? 2,那為什么不是0, 1,實(shí)際上就是因?yàn)橛捎谕胶彤惒降牡牟淮_定性導(dǎo)致的,也叫zalgo,所以呢,要想消除他們的不確定性,必須就讓他里面的代碼要么都是同步,要么都是異步,這也是then為什么是異步的原因了

關(guān)于then,還有一個問題,就是then的返回值是什么,來繼續(xù)看問題

var p = Promise.resolve(21 );

var p2 = p.then(function(v){

return v* 2;

});

console.log(p2);

通過他的結(jié)果,你很容易就能看出來,then的返回值是一個Promise,那么,這個then回調(diào)是不是可以這么理解呢?

function callback() {

return Promise.resolve(42);

}

如果是的話,那么咱們就研究一下Promise.resolve()的特性,然后then()同理就可以是吧

那么我們現(xiàn)在就研究一下Promise.resolve()的一些特性:

如果向Promise.resolve()傳遞一個非Promise,非thenable的立即值,就會立即得到這個值填充的Promise,這個有三個關(guān)鍵字,非Promise,非thenable和立即值

如果向Promise.resolve()傳遞一個真正的promise,那么就會返回這個Promise,又一個例子,很好理解

var p = Promise.resolve(42);

var p2 = Promise.resolve(p);

console.log(p === p2);// true

如果向Promise.resolve()傳遞一個非Promise的thenable值,那么就會展開這個值,并且在展開過程會持續(xù)到提取出一個具體的Promise最終值

大家應(yīng)該會有一點(diǎn)疑惑,thenable是什么,這段話是什么意思

var obj = {

then(resolve, reject) {

resolve(42);

}

};

Promise.resolve(obj).then((msg)=> {

console.log(msg);//42

});

好了,Promise.resolve()特性講完了,then返回值同理

同理完了以后呢,就會出現(xiàn)一些比較有意思的用法

首先就是鏈?zhǔn)秸{(diào)用,比如說

var p = Promise.resolve(21 );

var p2 = p.then(function(v){

console.log( v );// 21

?// 用值42填充p2

?return v* 2;

} );

// 連接p2

p2.then(function(v){

console.log( v );// 42

} );

很簡單吧,就不贅述了。

還有一個比較有意思,就是Promise實(shí)現(xiàn)同步執(zhí)行,也就是前一個then如果是異步的話,它必須操作完成后,才會執(zhí)行后面的then,常見的寫法是這樣的

new Promise((resolve, reject)=> {

setTimeout(()=> {

console.log('exec in promise it');

resolve();

},1000);

}).then(()=> {

return new Promise((resolve, reject)=> {

setTimeout(()=> {

console.log('exec in then it');

resolve();

},1000);

});

});

這個先過一秒輸出第一句話,再過一秒輸出第二句話

這個的原理實(shí)際上剛剛Promise.resolve()的第二條,如果返回的是Promise,那么會直接返回這個Promise,在這里,直接返回return的這個Promise后,就會等待這個Promise決議,在一秒后決議完,就執(zhí)行后面的then

最后一個有關(guān)then的知識點(diǎn)了:

一個Promise決議后,這個Promise上所有的通過then()注冊的回調(diào)都會在下一個異步時(shí)間節(jié)點(diǎn)上依次被立即調(diào)用,這些回掉中任意一個都無法影響或者延誤對其他回調(diào)的調(diào)用

var p = new Promise((resolve, reject)=> {

resolve();

});

p.then(function(){

p.then(function(){

console.log("C" );

} );

console.log("A" );

} );

p.then(function(){

console.log("B" );

} );

// a b c

這個的重點(diǎn)實(shí)際上是這些決議回調(diào)都被加入到了一個隊(duì)列中,輸出的順序正好實(shí)際上就代表了他們加入隊(duì)列后的先后順序

好的,這一章講解完了,如果有什么想和我討論的,或者有什么意見和建議,請留言給我(qq:75675231,email:liu75675231@126.com)

參考書籍《你不知道的Javascript中卷》

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,827評論 1 56
  • 一、Promise的含義 Promise在JavaScript語言中早有實(shí)現(xiàn),ES6將其寫進(jìn)了語言標(biāo)準(zhǔn),統(tǒng)一了用法...
    Alex灌湯貓閱讀 887評論 0 2
  • 一. Callback (回調(diào)函數(shù)) 1.定義:把函數(shù)當(dāng)作變量傳到另一個函數(shù)里,傳進(jìn)去之后執(zhí)行甚至返回等待之后的...
    hutn閱讀 1,616評論 0 2
  • 特點(diǎn) Promise能將回調(diào)分離出來,在異步操作執(zhí)行之后,用鏈?zhǔn)椒椒▓?zhí)行回調(diào),雖然es5用封裝函數(shù)也能實(shí)現(xiàn),但是如...
    一二三kkxx閱讀 714評論 0 1
  • //本文內(nèi)容起初摘抄于 阮一峰 作者的譯文,用于記錄和學(xué)習(xí),建議觀者移步于原文 概念: 所謂的Promise,...
    曾經(jīng)過往閱讀 1,318評論 0 7

友情鏈接更多精彩內(nèi)容