Promise 使用篇

Promise 對象是一個代理對象,它允許你為異步操作的成功和失敗分別綁定相應(yīng)的處理方法(handlers)簇搅。 這讓異步方法可以像同步方法那樣返回值习寸,但并不是立即返回最終執(zhí)行結(jié)果期吓,而是一個能代表未來出現(xiàn)的結(jié)果的promise對象

一個 Promise有以下幾種狀態(tài):

  • pending: 初始狀態(tài)学搜,既不是成功位谋,也不是失敗狀態(tài)副签。
  • fulfilled: 意味著操作成功完成遥椿。
  • rejected: 意味著操作失敗。

參數(shù)

Promise 的構(gòu)造器接收一個執(zhí)行函數(shù)(executor)

executor是帶有 resolve 和 reject 兩個參數(shù)的函數(shù) 继薛。Promise構(gòu)造函數(shù)執(zhí)行時立即調(diào)用executor 函數(shù), resolve 和 reject 兩個函數(shù)作為參數(shù)傳遞給executor(executor 函數(shù)在Promise構(gòu)造函數(shù)返回所建promise實例對象前被調(diào)用)愈捅。resolve 和 reject 函數(shù)被調(diào)用時遏考,分別將promise的狀態(tài)改為fulfilled(完成)或rejected(失敗)蓝谨。executor 內(nèi)部通常會執(zhí)行一些異步操作灌具,一旦異步操作執(zhí)行完畢(可能成功/失敗)青团,要么調(diào)用resolve函數(shù)來將promise狀態(tài)改成fulfilled,要么調(diào)用reject 函數(shù)將promise的狀態(tài)改為rejected咖楣。如果在executor函數(shù)中拋出一個錯誤督笆,那么該promise 狀態(tài)為rejected。executor函數(shù)的返回值被忽略诱贿。

屬性

Promise.length

length屬性娃肿,其值總是為 1 (構(gòu)造器參數(shù)的數(shù)目)

Promise.prototype

表示 Promise 構(gòu)造器的原型

基本使用

怎樣擁有 Promise 功能

只需讓該函數(shù)返回一個 Promise 就可以了

function sleep(time) {
    return new Promise(resolve => {
        console.log('executor 函數(shù)立即執(zhí)行')
        setTimeout(resolve, time)
    })
}

console.log('1000 ms 之后醒來')
sleep(1000).then(() => { console.log('嗨起來!') })

當(dāng) executor 函數(shù)出異常的時候, Promise 狀態(tài)改變成 rejected,executor函數(shù)的返回值被忽略

function sleep(time) {
    return new Promise(resolve => {
        throw 12
        // 這里將不會在執(zhí)行
        setTimeout(resolve, time)
    })
}

sleep(1000).then(null, (e) => { console.log('error', e) })

鏈?zhǔn)秸{(diào)用

Promise.resolve 返回成功狀態(tài)
Promise.reject 返回失敗狀態(tài)

// Promise.reject(1) 拋出了一個錯誤異常
// 會被最近的一個 onRejected 函數(shù)捕獲到
Promise.reject(1).then((body) => {
    console.log('success', body)
    return Promise.reject(2)
}, null).then((body) => {
    console.log('success', body)
    return 3
}, (error) => {
    console.log('error', error)
    // 當(dāng)返回值不是一個 Promise 對象的時候
    // 默認(rèn)包裝成 Promise 
    // 當(dāng) executor 沒有出現(xiàn)異常的時候會走到下一個 onFulfilled 函數(shù)
    return 4
}).then((body) => {
    console.log('success', body)
    // 當(dāng) executor 沒有出現(xiàn)異常的時候會走到下一個 onRejected 函數(shù)
    return a
}, (error) => {
    console.log('error', error)
}).then((body) => {
    console.log('success', body)
}, (error) => {
    console.log('error', error)
    // 當(dāng)函數(shù)沒有顯示的設(shè)置返回值時
    // 默認(rèn)返回一個 Promise 值為 undefined
}).then((body) => {
    console.log('success', typeof body)
}, (error) => {
    console.log('error', error)
})

Promise.all

并發(fā)操作 接收一個數(shù)組/string作為參數(shù)
當(dāng)所有的結(jié)果成之后珠十,才會走 onFulfilled ,否則走 onRejected

function sleep(time) {
    return new Promise(resolve => {
        console.log('executor 函數(shù)立即執(zhí)行')
        setTimeout(resolve, time)
    })
}

Promise.all([sleep(100), Promise.resolve(1), 2]).then(body => {
    console.log('success', body) // success [undefined, 1, 2]
})

Promise.all([sleep(100), Promise.reject(1), 2]).then(body => {
    console.log('success', body) 
    console.log(body)
}, (error) => {
    console.log('error', error) // error 1
})

// 當(dāng)參數(shù)為一個空是 是同步操作
Promise.all([]).then(body => {
    console.log('success', body) // success []
    console.log(body)
})

Promise.all('').then(body => {
    console.log('success', body) // success []
    console.log(body)
})

Promise.race

接收一個數(shù)組作為參數(shù)
最后的狀態(tài)取決于數(shù)組中最快返回結(jié)果的某一項的狀態(tài)

Promise.race([sleep(100), Promise.reject(1), 2]).then(body => {
    console.log('success', body) 
    console.log(body)
}, (error) => {
    console.log('error', error) // error 1
})

Promise.race([Promise.reject(1), 2]).then(body => {
    console.log('success', body) 
    console.log(body)
}, (error) => {
    console.log('error', error) // error 1
})

Promise.race([sleep(100), sleep(0)]).then(body => {
    console.log('success', body) // success 0
    console.log(body)
}, (error) => {
    console.log('error', error) 
})

Promise.prototype.finally(onFinally) 不管成功失敗都會觸發(fā)

Promise.resolve(1).finally(() => console.log('finally'))

Promise.reject(1).finally(() => console.log('finally'))

錯誤處理

鏈?zhǔn)秸{(diào)用時 只會找到最近的一個錯誤處理函數(shù)執(zhí)行,即使監(jiān)聽了 catch 也不會觸發(fā)

Promise.reject(1)
.then()
.then(null, error => console.log('錯誤處理 then', error))  // '錯誤處理 then' 1
.catch(error => console.log('錯誤處理 catch', error))  
.finally(() => console.log('finally')) // finally

緩存當(dāng)前 Promise 示例的情況下 所有的錯誤處理函數(shù)都會觸發(fā)

const p = Promise.reject(1)
p.then()
p.then(null, error => console.log('錯誤處理 then', error))  // '錯誤處理 then' 1
p.catch(error => console.log('錯誤處理 catch', error))  // '錯誤處理 catch' 1
p.finally(() => console.log('finally')) // finally

至此我們已經(jīng)基本了解了 Promise 的使用了料扰, 接下來讓我們一起探討一下 Promise 的原理

【筆記不易,如對您有幫助焙蹭,請點贊晒杈,謝謝】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市孔厉,隨后出現(xiàn)的幾起案子拯钻,更是在濱河造成了極大的恐慌,老刑警劉巖撰豺,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粪般,死亡現(xiàn)場離奇詭異,居然都是意外死亡郑趁,警方通過查閱死者的電腦和手機刊驴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寡润,“玉大人捆憎,你說我怎么就攤上這事∷笪疲” “怎么了躲惰?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長变抽。 經(jīng)常有香客問我础拨,道長,這世上最難降的妖魔是什么绍载? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任诡宗,我火速辦了婚禮,結(jié)果婚禮上击儡,老公的妹妹穿的比我還像新娘塔沃。我一直安慰自己,他們只是感情好阳谍,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布蛀柴。 她就那樣靜靜地躺著螃概,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鸽疾。 梳的紋絲不亂的頭發(fā)上吊洼,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機與錄音制肮,去河邊找鬼冒窍。 笑死,一個胖子當(dāng)著我的面吹牛弄企,可吹牛的內(nèi)容都是我干的超燃。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼拘领,長吁一口氣:“原來是場噩夢啊……” “哼意乓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起约素,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤届良,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后圣猎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體士葫,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年送悔,在試婚紗的時候發(fā)現(xiàn)自己被綠了慢显。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡欠啤,死狀恐怖荚藻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情洁段,我是刑警寧澤应狱,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站祠丝,受9級特大地震影響疾呻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜写半,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一岸蜗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧叠蝇,春花似錦璃岳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炎功,卻和暖如春枚冗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛇损。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工赁温, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人淤齐。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓股囊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親更啄。 傳聞我的和親對象是個殘疾皇子稚疹,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

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