JavaScript Promise簡(jiǎn)介

我們?cè)谥暗奈恼轮泻?jiǎn)述了一下JS中的回調(diào)函數(shù)以及實(shí)現(xiàn)方式淺談JavaScript的回調(diào)函數(shù)盯滚,其中談到了promise實(shí)現(xiàn)異步編程兽埃,在了解promise之前侦鹏,我們先來(lái)看一下一般實(shí)現(xiàn)異步編程的方法铜跑。

回調(diào)函數(shù)

在ajax中湿右,我們經(jīng)常用到回調(diào)函數(shù)來(lái)表示當(dāng)請(qǐng)求成功之后所進(jìn)行的操作荐操,例如

ajax({
  method: 'GET',
  url: '/xxx',
  success: function(responseText){
    console.log(responseText)
  }
  error: function(status){
   console.log('請(qǐng)求失敗芜抒,狀態(tài)碼為' + status)
  }
})

function ajax(options){
  let {method, url, success, error} = options
  if(!method){ throw new Error('Error!沒(méi)有傳入method') } 
  url = url || location.href
  let xhr = new XMLHttpRequest()
  xhr.open(method, url)
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if(xhr.status>=200 && xhr.status < 400){
        success && success.call(null, xhr.responseText, xhr)
      }else if(xhr.status >= 400){
        error && error.call(null, xhr.status, xhr)
      }
    }
  }
  xhr.send()
}

上面的例子中托启,通過(guò)自己封裝的一個(gè)ajax方法宅倒,當(dāng)請(qǐng)求成功/失敗之后,通過(guò)回調(diào)函數(shù)屯耸,實(shí)現(xiàn)成功/失敗的事件拐迁,這樣看似乎沒(méi)有什么問(wèn)題,但是當(dāng)請(qǐng)求成功時(shí)疗绣,需要執(zhí)行多個(gè)回調(diào)函數(shù)线召,該怎樣呢?
正常情況下多矮,可以這樣實(shí)現(xiàn)

ajax({
  method: 'GET',
  url: '/xxx',
  success: function(responseText){
    success1()
    success2()
  }
  error: function(status){
    console.log('請(qǐng)求失敗缓淹,狀態(tài)碼為' + status)
  }
})

在成功的調(diào)用后哈打,我們可能需要把返回的結(jié)果用在另一個(gè)Ajax請(qǐng)求中,也可能請(qǐng)求多次讯壶,這樣就可能會(huì)出現(xiàn)回調(diào)函數(shù)之間層層嵌套的情況(函數(shù)連環(huán)套)料仗,當(dāng)這種嵌套的回調(diào)函數(shù)變得難以理解,開(kāi)發(fā)人員需要仔細(xì)分析哪些代碼用于應(yīng)用的業(yè)務(wù)邏輯伏蚊,而哪些代碼處理異步函數(shù)調(diào)用的立轧,代碼結(jié)構(gòu)支離破碎。錯(cuò)誤處理也分解了躏吊。

Promise

為了降低異步編程的復(fù)雜性氛改,開(kāi)發(fā)人員一直尋找簡(jiǎn)便的方法來(lái)處理異步操作。其中一種處理模式稱為promise(注意:promise是一種處理模式)颜阐,它代表了一種可能會(huì)長(zhǎng)時(shí)間運(yùn)行而且不一定必須完整的操作的結(jié)果平窘。這種模式不會(huì)阻塞和等待長(zhǎng)時(shí)間的操作完成,而是返回一個(gè)代表了承諾的(promised)結(jié)果的對(duì)象凳怨。

jQuery中的ajax對(duì)象返回了一個(gè)類似promise的對(duì)象瑰艘,并提供了then方法來(lái)實(shí)現(xiàn)異步處理

let promise = $.ajax({ method: 'GET', url: '/xxx'})
promise.then(success1).then(success2)

then方法提供了兩個(gè)參數(shù),resolvedHandler肤舞,rejectedHandler紫新。resolvedHandler 回調(diào)函數(shù)在promise對(duì)象進(jìn)入完成狀態(tài)時(shí)會(huì)觸發(fā),并傳遞結(jié)果李剖;rejectedHandler函數(shù)會(huì)在拒絕狀態(tài)下調(diào)用芒率。then方法會(huì)返回另一個(gè)promise對(duì)象,以便于形成promise管道篙顺。后來(lái)ES6對(duì)其進(jìn)行了規(guī)范偶芍,并提供了原生的Promise對(duì)象。

所謂Promise德玫,簡(jiǎn)單說(shuō)就是一個(gè)容器匪蟀,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō)宰僧,Promise 是一個(gè)對(duì)象材彪,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API琴儿,各種異步操作都可以用同樣的方法進(jìn)行處理段化。

Promise對(duì)象有以下兩個(gè)特點(diǎn)

  1. 對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作造成,有三種狀態(tài):Pending(進(jìn)行中)显熏、Fulfilled(已成功)和Rejected(已失敗)晒屎。只有異步操作的結(jié)果佃延,可以決定當(dāng)前是哪一種狀態(tài)现诀,任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)履肃,它的英語(yǔ)意思就是“承諾”仔沿,表示其他手段無(wú)法改變。

  2. 一旦狀態(tài)改變尺棋,就不會(huì)再變封锉,任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變膘螟,只有兩種可能:從Pending變?yōu)镕ulfiled(resolve)和從Pending變?yōu)镽ejected成福。只要這兩種情況發(fā)生,狀態(tài)就凝固了荆残,不會(huì)再變了奴艾,會(huì)一直保持這個(gè)結(jié)果,這時(shí)就稱為 Resolved(已定型)内斯。如果改變已經(jīng)發(fā)生了蕴潦,你再對(duì)Promise對(duì)象添加回調(diào)函數(shù),也會(huì)立即得到這個(gè)結(jié)果俘闯。這與事件(Event)完全不同潭苞,事件的特點(diǎn)是,如果你錯(cuò)過(guò)了它真朗,再去監(jiān)聽(tīng)此疹,是得不到結(jié)果的。

ES6規(guī)定遮婶,Promise是一個(gè)構(gòu)造函數(shù)蝗碎,可以通過(guò)它來(lái)創(chuàng)建Promise實(shí)例

let promise = new Promise(function(resolve,reject){
  if( /* 異步操作成功 */){
    resolve()
  }else{
    reject()
  }
})

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)也是函數(shù)旗扑,分別是resolve和reject蹦骑。它們由 JavaScript 引擎提供,不用自己部署肩豁。

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ù)傳遞出去谜叹。

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ù)疾忍。

針對(duì)于我們一開(kāi)始的例子,用Promise可以這樣來(lái)實(shí)現(xiàn)

function ajax(options){
  return new Promise(function(resolve, reject){ // 1
    let {method, url} = options
    if(!method){ throw new Error('Error床三!沒(méi)有傳入method') } 
    url = url || location.href
    let xhr = new XMLHttpRequest()
    xhr.open(method, url)
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status < 400){
          resolve.call(null, xhr.responseText) // 2
        }else if(xhr.status >= 400){
          reject.call(null, xhr) // 3
        }
      }
    }
    xhr.send()
  })
}
 ajax({ method: 'GET', url:'/x'}).then(success1, error).then(success2,error)

有了Promise對(duì)象一罩,就可以將異步操作以同步操作的流程表達(dá)出來(lái),避免了層層嵌套的回調(diào)函數(shù)撇簿。此外聂渊,Promise對(duì)象提供統(tǒng)一的接口,使得控制異步操作更加容易补疑。

Promise也有一些缺點(diǎn)歧沪。首先,無(wú)法取消Promise莲组,一旦新建它就會(huì)立即執(zhí)行诊胞,無(wú)法中途取消。其次锹杈,如果不設(shè)置回調(diào)函數(shù)撵孤,Promise內(nèi)部拋出的錯(cuò)誤,不會(huì)反應(yīng)到外部竭望。第三邪码,當(dāng)處于Pending狀態(tài)時(shí),無(wú)法得知目前進(jìn)展到哪一個(gè)階段(剛剛開(kāi)始還是即將完成)咬清。

參考

  1. 阮一峰 ES6 Promise
  2. JavaScript異步編程的Promise模式
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闭专,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子旧烧,更是在濱河造成了極大的恐慌影钉,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掘剪,死亡現(xiàn)場(chǎng)離奇詭異平委,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)夺谁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門廉赔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)肉微,“玉大人,你說(shuō)我怎么就攤上這事蜡塌〉锬桑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵岗照,是天一觀的道長(zhǎng)村象。 經(jīng)常有香客問(wèn)我,道長(zhǎng)攒至,這世上最難降的妖魔是什么厚者? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮迫吐,結(jié)果婚禮上库菲,老公的妹妹穿的比我還像新娘。我一直安慰自己志膀,他們只是感情好熙宇,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著溉浙,像睡著了一般烫止。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上戳稽,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天馆蠕,我揣著相機(jī)與錄音,去河邊找鬼惊奇。 笑死互躬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的颂郎。 我是一名探鬼主播吼渡,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼乓序!你這毒婦竟也來(lái)了寺酪?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤替劈,失蹤者是張志新(化名)和其女友劉穎寄雀,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體抬纸,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡咙俩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年耿戚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了湿故。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阿趁。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖坛猪,靈堂內(nèi)的尸體忽然破棺而出脖阵,到底是詐尸還是另有隱情,我是刑警寧澤墅茉,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布命黔,位于F島的核電站,受9級(jí)特大地震影響就斤,放射性物質(zhì)發(fā)生泄漏悍募。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一洋机、第九天 我趴在偏房一處隱蔽的房頂上張望坠宴。 院中可真熱鬧,春花似錦绷旗、人聲如沸喜鼓。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)庄岖。三九已至,卻和暖如春角骤,著一層夾襖步出監(jiān)牢的瞬間隅忿,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工启搂, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留硼控,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓胳赌,卻偏偏與公主長(zhǎng)得像牢撼,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子疑苫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • Promise的含義: ??Promise是異步編程的一種解決方案熏版,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和...
    呼呼哥閱讀 2,172評(píng)論 0 16
  • 00撼短、前言Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大挺勿。它由社區(qū)...
    夜幕小草閱讀 2,135評(píng)論 0 12
  • Promiese 簡(jiǎn)單說(shuō)就是一個(gè)容器曲横,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果,語(yǔ)法上說(shuō),Pr...
    雨飛飛雨閱讀 3,361評(píng)論 0 19
  • 坐上車以后禾嫉,林溪妍忍不住大笑起來(lái)灾杰;“哈哈哈,沒(méi)……沒(méi)想到熙参,哈哈哈艳吠,你連同事都不放過(guò)啊孽椰!”王童童那略帶哀怨的眼神真的...
    何哞哞閱讀 261評(píng)論 0 1
  • 安全性 開(kāi)啟指紋支付的必須滿足以下安全條件: 1 . 開(kāi)啟指紋支付, 需讀完指紋支付協(xié)議, 驗(yàn)證交易密碼, 才可以...
    HeavenWong閱讀 2,601評(píng)論 1 10