2019-04-02 Promise 的小技巧和誤區(qū)

let rt = new Promise((resolve, reject)  => {
  console.log('start!');
  resolve('成功!');
  console.log('fine!')
  reject('失敗!');
});

rt.then(v => {
  console.log(v);
}) .catch(err => {
  console.log(err)
});

console.log('Hi!');

// start!
// fine!
// Hi!
// 成功!
  • Promise 構(gòu)造函數(shù) 接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject叹侄,它們是兩個函數(shù)巩搏,由 JavaScript 引擎提供,不用自己部署趾代。

  • Promise 構(gòu)造函數(shù)是同步執(zhí)行的贯底,promise.then 中的函數(shù)是異步執(zhí)行的。

  • Promise 一旦新建它就會立即執(zhí)行撒强,無法中途取消禽捆。

  • 一旦狀態(tài)改變,就不會再變飘哨,任何時候都可以得到這個結(jié)果胚想。

所以,上例中芽隆, rt 是一個 Promise 對象浊服,resolve 之后,再調(diào)用 reject 是無效的胚吁,所以 rt 的狀態(tài)是 resolved牙躺。

  • 調(diào)用resolve或reject并不會終結(jié) Promise 的參數(shù)函數(shù)的執(zhí)行(所以會打印fine!)。

  • 上面代碼中腕扶,Promise 新建后立即執(zhí)行孽拷,所以首先輸出的是start!。然后輸出fine!半抱,然后輸出Hi! 乓搬。

  • 而then方法指定的回調(diào)函數(shù)思犁,將在當前腳本所有同步任務(wù)執(zhí)行完才會執(zhí)行,所以成功!最后輸出进肯。

  • then \ catch 方法調(diào)用后激蹲,都返回了一個新的promise對象,所以可以鏈式調(diào)用很多個then函數(shù)江掩。

  • resolve 時可以添加參數(shù)学辱,參數(shù)會被傳遞到then函數(shù)作為參數(shù)

  • reject 時可以添加參數(shù),參數(shù)會被傳遞到catch函數(shù)作為參數(shù)
    环形,

Promise 中需要 return 嗎策泣?

上例可以看出,盡管我們無法改變一個已經(jīng)改變過狀態(tài)的Promise抬吟,但是reject和resolve都無法讓函數(shù)剩下的部分終止執(zhí)行萨咕,那函數(shù)中 resolve 或者 reject 之后的部分的代碼可能會對我們造成干擾。

所以我們最好在 resolve 或者 reject 之后立即停止執(zhí)行火本。

resolve('成功!');
return;

或者省一行代碼:

return resolve('成功');

那如果是這樣呢危队?

resolve('成功!');
return '失敗!';

這個Promise的then 函數(shù)的參數(shù)仍然是 成功!,也就是說 return 的值沒有任何用钙畔。

// 1: 對同一個promise對象同時調(diào)用 `then` 方法
var aPromise = new Promise(function (resolve) {
    resolve(100);
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    console.log(value); //  100
})

// vs

// 2: 對 `then` 進行 promise chain 方式進行調(diào)用
var bPromise = new Promise(function (resolve) {
    resolve(100);
});
bPromise.then(function (value) {
    return value * 2;
}).then(function (value) {
    return value * 2;
}).then(function (value) {
    console.log( value); //400
});

第1種寫法中并沒有使用promise的方法鏈方式茫陆,這在Promise中是應(yīng)該極力避免的寫法。這種寫法中的 then 調(diào)用幾乎是在同時開始執(zhí)行的擎析,而且傳給每個 then 方法的 value 值都是 100 簿盅。

第2中寫法則采用了方法鏈的方式將多個 then 方法調(diào)用串連在了一起,各函數(shù)也會嚴格按照 resolve → then → then → then 的順序執(zhí)行揍魂,并且傳給每個 then 方法的 value 的值都是前一個promise對象通過 return 返回的值桨醋。

也就是說,第一個 then 函數(shù)的參數(shù)是resolve 傳過來的现斋,后面的 then 函數(shù)的參數(shù)讨盒,是前面的then 函數(shù) return 的值


new Promise(() => {console.log(1)}).then(() => {console.log(2)})

這里永遠不會打印 2 , promise 的狀態(tài)永遠是 pending 不會改變,所以不會執(zhí)行 then里的回調(diào)函數(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末步责,一起剝皮案震驚了整個濱河市返顺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蔓肯,老刑警劉巖遂鹊,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蔗包,居然都是意外死亡秉扑,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舟陆,“玉大人误澳,你說我怎么就攤上這事∏厍” “怎么了忆谓?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長踱承。 經(jīng)常有香客問我倡缠,道長,這世上最難降的妖魔是什么茎活? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任昙沦,我火速辦了婚禮,結(jié)果婚禮上载荔,老公的妹妹穿的比我還像新娘盾饮。我一直安慰自己,他們只是感情好懒熙,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布丘损。 她就那樣靜靜地躺著,像睡著了一般煌珊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泌豆,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天定庵,我揣著相機與錄音,去河邊找鬼踪危。 笑死蔬浙,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的贞远。 我是一名探鬼主播畴博,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蓝仲!你這毒婦竟也來了俱病?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤袱结,失蹤者是張志新(化名)和其女友劉穎亮隙,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體垢夹,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡溢吻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了果元。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片促王。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡犀盟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蝇狼,到底是詐尸還是另有隱情阅畴,我是刑警寧澤,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布题翰,位于F島的核電站恶阴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏豹障。R本人自食惡果不足惜冯事,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望血公。 院中可真熱鬧昵仅,春花似錦、人聲如沸累魔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽垦写。三九已至吕世,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間梯投,已是汗流浹背命辖。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留分蓖,地道東北人尔艇。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像么鹤,于是被迫代替她去往敵國和親终娃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

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

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案蒸甜,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,698評論 1 56
  • 本文適用的讀者 本文寫給有一定Promise使用經(jīng)驗的人棠耕,如果你還沒有使用過Promise,這篇文章可能不適合你柠新,...
    HZ充電大喵閱讀 7,296評論 6 19
  • Prepending(進行時)昧辽,Resolve(成功了),Reject(失敗了)登颓,then......等 1.Pr...
    _菩提本無樹_閱讀 48,976評論 0 21
  • 一搅荞、Promise的含義 Promise在JavaScript語言中早有實現(xiàn),ES6將其寫進了語言標準,統(tǒng)一了用法...
    Alex灌湯貓閱讀 818評論 0 2
  • 目錄:Promise 的含義基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry閱讀 1,488評論 0 8