談?wù)勎覍?duì)Promise的理解(一)

一葱色、Promise是什么铃辖?

Promise是最早由社區(qū)提出和實(shí)現(xiàn)的一種解決異步編程的方案,比其他傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理和更強(qiáng)大窖梁。

ES6 將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)赘风,統(tǒng)一了用法,原生提供了Promise對(duì)象纵刘。

ES6 規(guī)定邀窃,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來(lái)生成Promise實(shí)例假哎。

二瞬捕、Promise是為解決什么問(wèn)題而產(chǎn)生的?

promise是為解決異步處理回調(diào)金字塔問(wèn)題而產(chǎn)生的

三舵抹、Promise的兩個(gè)特點(diǎn)

1肪虎、Promise對(duì)象的狀態(tài)不受外界影響

1)pending 初始狀態(tài)

2)fulfilled 成功狀態(tài)

3)rejected 失敗狀態(tài)

Promise 有以上三種狀態(tài),只有異步操作的結(jié)果可以決定當(dāng)前是哪一種狀態(tài)惧蛹,其他任何操作都無(wú)法改變這個(gè)狀態(tài)

2扇救、Promise的狀態(tài)一旦改變刑枝,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果迅腔,狀態(tài)不可以逆装畅,只能由 pending變成fulfilled或者由pending變成rejected

四、Promise的三個(gè)缺點(diǎn)

1)無(wú)法取消Promise,一旦新建它就會(huì)立即執(zhí)行沧烈,無(wú)法中途取消

2)如果不設(shè)置回調(diào)函數(shù)掠兄,Promise內(nèi)部拋出的錯(cuò)誤,不會(huì)反映到外部

3)當(dāng)處于pending狀態(tài)時(shí)锌雀,無(wú)法得知目前進(jìn)展到哪一個(gè)階段蚂夕,是剛剛開(kāi)始還是即將完成

?五、Promise在哪存放成功回調(diào)序列和失敗回調(diào)序列腋逆?

1)onResolvedCallbacks 成功后要執(zhí)行的回調(diào)序列 是一個(gè)數(shù)組

2)onRejectedCallbacks 失敗后要執(zhí)行的回調(diào)序列 是一個(gè)數(shù)組

以上兩個(gè)數(shù)組存放在Promise 創(chuàng)建實(shí)例時(shí)給Promise這個(gè)類傳的函數(shù)中婿牍,默認(rèn)都是空數(shù)組。

每次實(shí)例then的時(shí)候 傳入 onFulfilled 成功回調(diào) onRejected 失敗回調(diào)闲礼,如果此時(shí)的狀態(tài)是pending 則將onFulfilled和onRejected push到對(duì)應(yīng)的成功回調(diào)序列數(shù)組和失敗回調(diào)序列數(shù)組中牍汹,如果此時(shí)的狀態(tài)是fulfilled 則onFulfilled立即執(zhí)行铐维,如果此時(shí)的狀態(tài)是rejected則onRejected立即執(zhí)行

上述序列中的回調(diào)函數(shù)執(zhí)行的時(shí)候 是有順序的柬泽,即按照順序依次執(zhí)行

?六、Promise的用法

1嫁蛇、Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)锨并,該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)睬棚,由 JavaScript 引擎提供第煮,不用自己部署。

```

? ? const promise = new Promise(function(resolve, reject) {

? ? ? // ... some code

? ? ? if (/* 異步操作成功 */){

? ? ? ? resolve(value);

? ? ? } else {

? ? ? ? reject(error);

? ? ? }

? ? });

```

2抑党、resolve函數(shù)的作用是包警,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved),在異步操作成功時(shí)調(diào)用底靠,并將異步操作的結(jié)果害晦,作為參數(shù)傳遞出去;reject函數(shù)的作用是暑中,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected)壹瘟,在異步操作失敗時(shí)調(diào)用,并將異步操作報(bào)出的錯(cuò)誤鳄逾,作為參數(shù)傳遞出去稻轨。

3、Promise實(shí)例生成以后雕凹,可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)殴俱。

```

? ? promise.then(function(value) {

? ? ? // success

? ? }, function(error) {

? ? ? // failure

? ? });

```

then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)政冻。第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞esolved時(shí)調(diào)用,第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞ejected時(shí)調(diào)用粱挡。其中赠幕,第二個(gè)函數(shù)是可選的,不一定要提供询筏。這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)榕堰。

?七、按照Promise A+規(guī)范寫Promise的簡(jiǎn)單實(shí)現(xiàn)原理

```

// 第一步:Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)嫌套,該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject逆屡。它們是兩個(gè)函數(shù),由 JavaScript 引擎提供踱讨,不用自己部署魏蔗。

? ? function Promise(task) {

? ? ? ? let that = this; // 緩存this

? ? ? ? that.status = 'pending'; // 進(jìn)行中的狀態(tài)

? ? ? ? that.value = undefined; //初始值

? ? ? ? that.onResolvedCallbacks = []; // 存放成功后要執(zhí)行的回調(diào)函數(shù)的序列

? ? ? ? that.RejectedCallbacks = []; // 存放失敗后要執(zhí)行的回調(diào)函數(shù)的序列

? ? ? ? // 該方法是將Promise由pending變成fulfilled

? ? ? ? function resolve (value) {

? ? ? ? ? ? if (that.status == 'pending') {

? ? ? ? ? ? ? ? that.status = 'fulfilled';

? ? ? ? ? ? ? ? that.value = value;

? ? ? ? ? ? ? ? that.onResolvedCallbacks.forEach(cb => cd(that.value))

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 該方法是將Promise由pending變成rejected

? ? ? ? function reject (reason) {

? ? ? ? ? if (that.status == 'pending') {

? ? ? ? ? ? ? ? that.status = 'rejected';

? ? ? ? ? ? ? ? that.value = reason;

? ? ? ? ? ? ? ? that.onRjectedCallbacks.forEach(cb => cd(that.value))

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? try {

? ? ? ? // 每一個(gè)Promise在new一個(gè)實(shí)例的時(shí)候 接受的函數(shù)都是立即執(zhí)行的

? ? ? ? ? ? task(resolve, reject)

? ? ? ? } catch (e) {

? ? ? ? ? ? reject(e)

? ? ? ? }

? ? }

// 第二部 寫then方法,接收兩個(gè)函數(shù)onFulfilled onRejected痹筛,狀態(tài)是成功態(tài)的時(shí)候調(diào)用onFulfilled 傳入成功后的值莺治,失敗態(tài)的時(shí)候執(zhí)行onRejected,傳入失敗的原因帚稠,pending 狀態(tài)時(shí)將成功和失敗后的這兩個(gè)方法緩存到對(duì)應(yīng)的數(shù)組中谣旁,當(dāng)成功或失敗后 依次再執(zhí)行調(diào)用

? ? Promise.prototype.then = function(onFulfilled, onRejected) {

? ? ? ? let that = this;

? ? ? ? if (that.status == 'fulfilled') {

? ? ? ? ? ? onFulfilled(that.value);

? ? ? ? }

? ? ? ? if (that.status == 'rejected') {

? ? ? ? ? ? onRejected(that.value);

? ? ? ? }

? ? ? ? if (that.status == 'pending') {

? ? ? ? ? ? that.onResolvedCallbacks.push(onFulfilled);

? ? ? ? ? ? that.onRjectedCallbacks.push(onRejected);

? ? ? ? }

? ? }

```

八、Promise 鏈?zhǔn)綄懛?/p>

我們先來(lái)看一個(gè)例子滋早,根據(jù)例子得出結(jié)論榄审,然后再寫源碼的實(shí)現(xiàn)部分來(lái)驗(yàn)證結(jié)論

```

? ? let promise = new Promise(function (resolve, reject) {

? ? ? ? resolve(100);// reject(100)

? ? });

? ? promise.then(function (data) {

? ? ? ? return data+100;

? ? },function (err) {

? ? ? return 'ssss';

? ? }).then(function (data) {

? ? ? ? console.log(data);// 200? // undefined // sss

? ? })

```

從上面的例子可以看出:

當(dāng)?shù)谝粋€(gè)promise的成功的回調(diào)里返回 200時(shí),第二個(gè)promise的成功回調(diào)的參數(shù)就是200

當(dāng)將resolve(100)改成reject(100)的時(shí)候杆麸,因?yàn)槭』卣{(diào)中什么也沒(méi)有返回所以第二個(gè)promise的成功回調(diào)中的參數(shù)是undefined

當(dāng)失敗的回調(diào)中返回sss時(shí)搁进,第二個(gè)promise的成功回調(diào)中的參數(shù)是sss

由此我們可以看出,第一個(gè)promise不管成功回調(diào)還是失敗回調(diào)昔头,他的返回值作為第二個(gè)promise中的成功時(shí)回調(diào)函數(shù)的參數(shù)值

鏈?zhǔn)綄懛芤恢眛hen下去的原因:鏈?zhǔn)秸{(diào)用靠的是返回新的promise饼问,來(lái)保證可以一直走成功或失敗

?九、? Promise.catch

Promise.prototype.catch方法是.then(null, rejection)的別名揭斧,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)莱革。

```

? ? //catch原理就是只傳失敗的回調(diào)

? ? Promise.prototype.catch = function(onRejected){

? ? ? ? this.then(null,onRejected);

? ? }

```

十、 Promise.all 方法

參數(shù):接受一個(gè)數(shù)組未蝌,數(shù)組內(nèi)都是Promise實(shí)例

返回值:返回一個(gè)Promise實(shí)例驮吱,這個(gè)Promise實(shí)例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實(shí)例的狀態(tài)變化。當(dāng)參數(shù)中所有的實(shí)例都處于resolve狀態(tài)時(shí)萧吠,返回的Promise實(shí)例會(huì)變?yōu)閞esolve狀態(tài)左冬。如果參數(shù)中任意一個(gè)實(shí)例處于reject狀態(tài),返回的Promise實(shí)例變?yōu)閞eject狀態(tài)

```

Promise.all = function(promises){

return new Promise(function(resolve,reject){

let done = gen(promises.length,resolve);

for(let i=0;i

promises[i].then(function(data){

done(i,data);

},reject);

}

});

}

```

十一纸型、Promise.resolve

返回一個(gè)Promise實(shí)例拇砰,這個(gè)實(shí)例處于resolve狀態(tài)梅忌。

根據(jù)傳入的參數(shù)不同有不同的功能:

值(對(duì)象、數(shù)組除破、字符串等):作為resolve傳遞出去的值

Promise實(shí)例:原封不動(dòng)返回

```

? ? //返回一個(gè)立刻成功的promise

? ? //別人提供 給你一個(gè)方法牧氮,需要你傳入一個(gè)promise,但你只有一個(gè)普通的值,你就可以通過(guò)這個(gè)方法把這個(gè)普通的值(string number object)轉(zhuǎn)成一個(gè)promise對(duì)象Promise.resolve = function(value){

return new Promise(function(resolve){

resolve(value);

});

}

```

?十二瑰枫、Promise.reject

返回一個(gè)Promise實(shí)例踱葛,這個(gè)實(shí)例處于reject狀態(tài)。

參數(shù)一般就是拋出的錯(cuò)誤信息光坝。

```

? ? //返回一個(gè)立刻失敗的promise

Promise.reject = function(reason){

return new Promise(function(resolve,reject){

reject(reason);

});

}

```

?十三尸诽、Promise.race

參數(shù):接受一個(gè)數(shù)組,數(shù)組內(nèi)都是Promise實(shí)例

返回值:返回一個(gè)Promise實(shí)例盯另,這個(gè)Promise實(shí)例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實(shí)例的狀態(tài)變化性含。當(dāng)參數(shù)中任何一個(gè)實(shí)例處于resolve狀態(tài)時(shí),返回的Promise實(shí)例會(huì)變?yōu)閞esolve狀態(tài)鸳惯。如果參數(shù)中任意一個(gè)實(shí)例處于reject狀態(tài)商蕴,返回的Promise實(shí)例變?yōu)閞eject狀態(tài)。

```

Promise.race = function(promises){

return new Promise(function(resolve,reject){

for(let i=0;i

promises[i].then(resolve,reject);

}

});

}

```

[Promises/A+規(guī)范](https://promisesaplus.com/)

[完整的手寫promise源碼地址](http://www.cnblogs.com/qinmengjiao123-123/p/8280973.html)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末芝发,一起剝皮案震驚了整個(gè)濱河市绪商,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌后德,老刑警劉巖部宿,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抄腔,死亡現(xiàn)場(chǎng)離奇詭異瓢湃,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)赫蛇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門绵患,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人悟耘,你說(shuō)我怎么就攤上這事落蝙。” “怎么了暂幼?”我有些...
    開(kāi)封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵筏勒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我旺嬉,道長(zhǎng)管行,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任邪媳,我火速辦了婚禮捐顷,結(jié)果婚禮上荡陷,老公的妹妹穿的比我還像新娘。我一直安慰自己迅涮,他們只是感情好废赞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著叮姑,像睡著了一般唉地。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上传透,一...
    開(kāi)封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天渣蜗,我揣著相機(jī)與錄音,去河邊找鬼旷祸。 笑死耕拷,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的托享。 我是一名探鬼主播骚烧,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼闰围!你這毒婦竟也來(lái)了赃绊?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤羡榴,失蹤者是張志新(化名)和其女友劉穎碧查,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體校仑,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡忠售,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迄沫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稻扬。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情纲熏,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布逝她,位于F島的核電站,受9級(jí)特大地震影響睬捶,放射性物質(zhì)發(fā)生泄漏黔宛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一侧戴、第九天 我趴在偏房一處隱蔽的房頂上張望宁昭。 院中可真熱鬧跌宛,春花似錦、人聲如沸积仗。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)寂曹。三九已至哎迄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間隆圆,已是汗流浹背漱挚。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留渺氧,地道東北人旨涝。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像侣背,于是被迫代替她去往敵國(guó)和親白华。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一贩耐、Promise是什么弧腥? Promise是最早由社區(qū)提出和實(shí)現(xiàn)的一種解決異步編程的方案,比其他傳統(tǒng)的解決方案(回...
    Macchiato_go閱讀 21,576評(píng)論 1 15
  • 本文適用的讀者 本文寫給有一定Promise使用經(jīng)驗(yàn)的人潮太,如果你還沒(méi)有使用過(guò)Promise管搪,這篇文章可能不適合你,...
    HZ充電大喵閱讀 7,311評(píng)論 6 19
  • Promise 對(duì)象 Promise 的含義 Promise 是異步編程的一種解決方案铡买,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,707評(píng)論 1 56
  • 前言 本文旨在簡(jiǎn)單講解一下javascript中的Promise對(duì)象的概念更鲁,特性與簡(jiǎn)單的使用方法。并在文末會(huì)附上一...
    _暮雨清秋_閱讀 2,200評(píng)論 0 3
  • //本文內(nèi)容起初摘抄于 阮一峰 作者的譯文寻狂,用于記錄和學(xué)習(xí)岁经,建議觀者移步于原文 概念: 所謂的Promise朋沮,...
    曾經(jīng)過(guò)往閱讀 1,239評(píng)論 0 7