JavaScript Promise查缺補漏

image

原文鏈接

Promise簡介

ECMAscript6原生提供了Promise對象,由瀏覽器直接支持,目前大多數瀏覽器都已經實現了,低版本瀏覽器可以使用es6-promise庫來填平兼容性問題。Promise最大的好處是把執行代碼和處理代碼分離開,使異步操作邏輯更加清晰。

Promise特點

1、對象的狀態不受外界影響
Promise對象代表一個異步操作,有三種狀態:

  • pending - 初始狀態。
  • fulfilled - 操作成功完成。
  • rejected - 操作失敗。

只有異步操作的結果可以決定當前是哪一種狀態,其他操作都不會影響狀態改變,這也是Promise最本質的特性,對于調用者的一種承諾

2、一旦狀態改變,就不會再變
Promise對象的狀態改變,只有兩種情況:從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生,狀態就會固定,不會再變了,會一直保持這個結果,與事件不同的是,就算改變已經發生了,再對Promise對象添加回調函數,也會立即得到這個結果,而事件一旦錯過再去監聽,就不會得到結果。

Promise優缺點

優點:

  • 有了Promise對象,就可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數Promise
  • 對象提供統一的接口,使得控制異步操作更加容易

缺點:

  • 無法取消 Promise,一旦新建它就會立即執行,無法中途取消
  • 如果不設置回調函數,Promise內部拋出的錯誤,不會反應到外部
  • 當處于Pending狀態時,無法得知目前進展到哪一個階段(剛剛開始或者即將完成)

Promise.prototype.then

Promise.prototype.then方法返回的是一個新的Promise對象,因此可以采用鏈式寫法

ajax("http://www.bestvist.com").then((json) => {
    return json.post;
}).then((post) => {
    // post處理
});

代碼中使用then方法,指定了兩個回調函數。第一個回調函數完成后,會將返回結果作為參數,傳入第二個then中的回調函數執行。

ajax("http://www.bestvist.com").then((jsonURL) => {
        return ajax(jsonURL);
}).then((post) => {
        // post處理
});

如果第一個回調函數返回的是Promise對象,后一個回調函數會等待該Promise對象的運行結果,等Promise運行結果返回,再進一步調用。
這種設計使得嵌套的異步操作,可以被很容易得改寫,把回調函數的"橫向發展"改為了"向下發展"。

Promise.prototype.catch

Promise.prototype.catch錯誤捕捉方法是Promise.prototype.then(null, rejection)的別名,用來指定發生錯誤時的處理函數。

ajax("http://www.bestvist.com").then((post) => {
    throw Error();
}).catch((error) => {
    // 捕捉回調函數運行時發生的錯誤進行處理
    console.log('error:' + error);
});

Promise對象的錯誤具有"冒泡"性質,會一直向后傳遞,直到被捕獲為止。

ajax("http://www.bestvist.com").then((jsonURL) => {
    return ajax(jsonURL);
}).then((comments) => {
    throw Error();
}).catch((error) => {
    // 處理前兩個回調函數的錯誤
        console.log('error:' + error);
});

Promise.resolve

Promise.resolve方法可以將現有對象轉為Promise對象。如果Promise.resolve方法的參數,不是thenable 對象(具有then方法的對象 ),則返回一個新的Promise對象,且它的狀態為fulfilled。

const resolve = Promise.resolve('promise resolve');
resolve.then((s)=>{
  console.log(s)
});

輸出結果:
promise resolve

如果Promise對象的實例狀態為fulfilled,回調函數會立即執行,Promise.resolve方法的參數就是回調函數的參數。
如果Promise.resolve方法的參數是一個Promise對象的實例,則會返回該Promise實例。

Promise.reject

Promise.reject(reason)方法與resolve方法類似,也會返回一個新的Promise實例,但該實例的狀態為rejected。Promise.reject方法的參數,會被傳遞給實例的回調函數。

const reject = Promise.reject('promise reject');
reject.then(null, (err) => {
  console.log(err)
});

輸出結果:
promise reject

Promise.all

Promise.all方法用于將多個Promise實例,包裝成一個新的Promise實例,該方法一般接受一個數組作為參數,但不一定是數組,只要具有iterator接口。且返回的每個成員都是Promise實例。

const getRandom = () => +(Math.random()*1000).toFixed(0);
const ajax = (taskID) => new Promise(resolve => {
    let timeout = getRandom();
    console.log(`taskID=${taskID} start.`);
    setTimeout(function() {
        console.log(`taskID=${taskID} finished in time=${timeout}.`);
        resolve(taskID)
    }, timeout);
});

Promise.all([ajax(1),ajax(2),ajax(3)])
.then(resultList => {
    console.log('results:',resultList);
});

輸出結果:
taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=2 finished in time=27.
taskID=3 finished in time=257.
taskID=1 finished in time=876.
results: [1, 2, 3]

Promise.all狀態分為兩種:

  • 只有ajax(1)、ajax(2)、ajax(3)的狀態都變成fulfilled,返回的狀態才會變成fulfilled,此時ajax(1)、ajax(2)、ajax(3)的返回值組成一個數組,傳遞給Promise.all的回調函數。
  • 只要ajax(1)、ajax(2)、ajax(3)之中有一個是rejected,返回的狀態就變成rejected,此時第一個被reject的實例的返回值,會傳遞給Promise.all的回調函數。

Promise.race

Promise.race方法也是將多個Promise實例,包裝成一個新的Promise實例,與Promise.all不同的是一旦有狀態改變,就會返回第一個狀態改變的Promise實例返回值。

const getRandom = () => +(Math.random()*1000).toFixed(0);
const ajax = (taskID) => new Promise(resolve => {
    let timeout = getRandom();
    console.log(`taskID=${taskID} start.`);
    setTimeout(function() {
        console.log(`taskID=${taskID} finished in time=${timeout}.`);
        resolve(taskID)
    }, timeout);
});

Promise.race([ajax(1),ajax(2),ajax(3)])
.then(result => {
    console.log('results:',result);
});

輸出結果:
taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=2 finished in time=59.
results: 2
taskID=3 finished in time=707.
taskID=1 finished in time=854.

Promise.race雖然返回第一個狀態改變的Promise實例,但不能阻止其他Promise實例狀態改變。

如果Promise.all方法和Promise.race方法的參數,不是Promise實例,就會調用Promise.resolve方法,將參數轉為Promise實例,再進一步處理。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函...
    neromous閱讀 8,719評論 1 56
  • Promise的含義: ??Promise是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和...
    呼呼哥閱讀 2,182評論 0 16
  • 目錄:Promise 的含義基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry閱讀 1,495評論 0 8
  • 00、前言Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區...
    夜幕小草閱讀 2,137評論 0 12
  • Promiese 簡單說就是一個容器,里面保存著某個未來才會結束的事件(通常是一個異步操作)的結果,語法上說,Pr...
    雨飛飛雨閱讀 3,366評論 0 19