我們?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模式