我們?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)
對(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ú)法改變。
一旦狀態(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)始還是即將完成)咬清。