我們在之前的文章中簡述了一下JS中的回調(diào)函數(shù)以及實現(xiàn)方式淺談JavaScript的回調(diào)函數(shù)，其中談到了promise實現(xiàn)異步編程，在了解promise之前，我們先來看一下一般實現(xiàn)異步編程的方法。

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

在ajax中，我們經(jīng)常用到回調(diào)函數(shù)來表示當請求成功之后所進行的操作，例如

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

function ajax(options){
  let {method, url, success, error} = options
  if(!method){ throw new Error('Error！沒有傳入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()
}

上面的例子中，通過自己封裝的一個ajax方法，當請求成功/失敗之后，通過回調(diào)函數(shù)，實現(xiàn)成功/失敗的事件，這樣看似乎沒有什么問題，但是當請求成功時，需要執(zhí)行多個回調(diào)函數(shù)，該怎樣呢？
正常情況下，可以這樣實現(xiàn)

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

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

Promise

為了降低異步編程的復(fù)雜性，開發(fā)人員一直尋找簡便的方法來處理異步操作。其中一種處理模式稱為promise（注意：promise是一種處理模式），它代表了一種可能會長時間運行而且不一定必須完整的操作的結(jié)果。這種模式不會阻塞和等待長時間的操作完成，而是返回一個代表了承諾的（promised）結(jié)果的對象。

jQuery中的ajax對象返回了一個類似promise的對象，并提供了then方法來實現(xiàn)異步處理

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

then方法提供了兩個參數(shù)，resolvedHandler，rejectedHandler。resolvedHandler 回調(diào)函數(shù)在promise對象進入完成狀態(tài)時會觸發(fā)，并傳遞結(jié)果；rejectedHandler函數(shù)會在拒絕狀態(tài)下調(diào)用。then方法會返回另一個promise對象，以便于形成promise管道。后來ES6對其進行了規(guī)范，并提供了原生的Promise對象。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。

Promise對象有以下兩個特點

1. 對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進行中）、Fulfilled（已成功）和Rejected（已失?。?。只有異步操作的結(jié)果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

2. 一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镕ulfiled(resolve)和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果，這時就稱為 Resolved（已定型）。如果改變已經(jīng)發(fā)生了，你再對Promise對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。

ES6規(guī)定，Promise是一個構(gòu)造函數(shù)，可以通過它來創(chuàng)建Promise實例

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

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

resolve函數(shù)的作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?Pending 變?yōu)?Resolved），在異步操作成功時調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；reject函數(shù)的作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?Pending 變?yōu)?Rejected），在異步操作失敗時調(diào)用，并將異步操作報出的錯誤，作為參數(shù)傳遞出去。

Promise實例生成以后，可以用then方法分別指定Resolved狀態(tài)和Rejected狀態(tài)的回調(diào)函數(shù)。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受兩個回調(diào)函數(shù)作為參數(shù)。第一個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)镽esolved時調(diào)用，第二個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)镽ejected時調(diào)用。其中，第二個函數(shù)是可選的，不一定要提供。這兩個函數(shù)都接受Promise對象傳出的值作為參數(shù)。

針對于我們一開始的例子，用Promise可以這樣來實現(xiàn)

function ajax(options){
  return new Promise(function(resolve, reject){ // 1
    let {method, url} = options
    if(!method){ throw new Error('Error！沒有傳入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對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。

Promise也有一些缺點。首先，無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。其次，如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤，不會反應(yīng)到外部。第三，當處于Pending狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

參考

1. 阮一峰 ES6 Promise
2. JavaScript異步編程的Promise模式