詳解JavaScript非同步程式設計中jQuery的promise物件的作用

Promise, 中文可以理解為願望，代表單一操作完成的最終結果。一個Promise有三種狀態：分別是unfulfilled(未滿足的）、fulfilled（滿足的）、failed（失敗的），fulfilled狀態和failed狀態都可以監聽。願望可以從未滿足狀態變成滿足或失敗狀態，一旦願望處於滿足或失敗狀態，其狀態將不可再改變。這種「不可改變」的特性對於一個Promise來說非常的重要，它可以避免Promise的狀態監聽器修改一個Promise的狀態導致別的監聽器的行為異常。例如：一個監聽fulfilled狀態的監聽器把Promise的狀態修改為failed，那麼將觸發failed狀態的監聽器，而如果一個failed狀態監聽器又把Promise的狀態設定為fulfilled，那麼又將觸發fulfilled狀態的監聽器，這樣將導致死循環。另外一種理解Promise這種特性的方式是把Promise看成是javascript中的primative類型的變量，這種變數可以被傳入被呼叫的函數中，但是不可以被呼叫函數所改變。

每個Promise物件都有一個方法：then(fulfilledHandler, errorHandler, progressHandler)，用來監聽一個Promise的不同狀態。 fulfilledHandler用於監聽fulfilled事件，errorHandler用於監聽failed事件，progressHandler用於監聽progress事件。一個Promise不強制實現progress狀態的事件監聽（jQuery的Deferred就是一個Promise的實現，但沒有實現對progress狀態事件的處理）。

then(...)函數中的fulfilledHandler和errorHandler的回傳值是一個新的Promise物件, 以便能夠鍊式呼叫then(...)函數。每一個回呼函數在正常情況下傳回的是處於fulfilled狀態的Promise，如果該回呼函數傳回錯誤值，那麼傳回的Promise狀態將會變成failed。

promise在非同步程式設計中的作用

非同步模式在web程式設計中變得越來越重要，對於web主流語言Javascript來說，這種模式實現起來不是很利索，為此，許多Javascript庫（比如jQuery和Dojo）添加了一種稱為promise的抽象（有時也稱為deferred）。透過這些函式庫，開發人員能夠在實際程式設計中使用 promise模式。
隨著Web 2.0技術的深入，瀏覽器端承受了越來越多的運算壓力，所以「並發」具有正面的意義。對於開發人員來說，既要保持頁面與使用者的互動不受影響，又要協調頁面與非同步任務的關係，這種非線性執行的程式要求存在適應的困難。先拋開頁面互動不談，我們能夠想到對於非同步呼叫需要處理兩種結果──成功操作和失敗處理。在成功的呼叫後，我們可能需要把回傳的結果用在另一個Ajax請求中，就會出現「函數連環套」的情況。這種情況會造成程式設計的複雜性。看看下面的程式碼範例（基於XMLHttpRequest2）：

function searchTwitter(term, onload, onerror) {
 
   var xhr, results, url;
   url = 'http://search.twitter.com/search.json&#63;rpp=100&q=' + term;
   xhr = new XMLHttpRequest();
   xhr.open('GET', url, true);
 
   xhr.onload = function (e) {
     if (this.status === 200) {
       results = JSON.parse(this.responseText);
       onload(results);
     }
   };
 
   xhr.onerror = function (e) {
     onerror(e);
   };
 
   xhr.send();
 }
 
 function handleError(error) {
   /* handle the error */
 }
 
 function concatResults() {
   /* order tweets by date */
 }
 
 function loadTweets() {
   var container = document.getElementById('container');
 
   searchTwitter('#IE10', function (data1) {
     searchTwitter('#IE9', function (data2) {
       /* Reshuffle due to date */
       var totalResults = concatResults(data1.results, data2.results);
       totalResults.forEach(function (tweet) {
         var el = document.createElement('li');
         el.innerText = tweet.text;
         container.appendChild(el);
       });
     }, handleError);
   }, handleError);
 }

登入後複製

上面的程式碼其功能是取得Twitter中hashtag為IE10和IE9的內容並在頁面中顯示出來。這種嵌套的回呼函數難以理解，開發人員需要仔細分析哪些程式碼用於應用的業務邏輯，而哪些程式碼處理非同步函數呼叫的，程式碼結構支離破碎。錯誤處理也分解了，我們需要在各個地方檢測錯誤的發生並作出相應的處理。

為了降低非同步程式設計的複雜性，開發人員一直在尋找簡單的方法來處理非同步操作。其中一種處理模式稱為promise，它代表了一種可能會長時間運行且不一定必須完整的操作的結果。這種模式不會阻塞和等待長時間的操作完成，而是傳回一個代表了承諾的（promised）結果的物件。

考慮這樣一個例子，頁面程式碼需要存取第三方的API，網路延遲可能會造成回應時間較長，在這種情況下，採用非同步程式設計不會影響整個頁面與使用者的互動。 promise模式通常會實作一種稱為then的方法，用來註冊狀態變化時對應的回呼函數。例如下面的程式碼範例：

searchTwitter(term).then(filterResults).then(displayResults);

登入後複製

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS Promise/A 标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异步操作串联起来，如then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在promise对象进入完成状态时会触发，并传递结果；rejectedHandler函数会在拒绝状态下调用。

有了promise模式，我们可以重新实现上面的Twitter示例。为了更好的理解实现方法，我们尝试着从零开始构建一个promise模式的框架。首先需要一些对象来存储promise。

var Promise = function () {
    /* initialize promise */
  };

登入後複製

接下来，定义then方法，接受两个参数用于处理完成和拒绝状态。

Promise.prototype.then = function (onResolved, onRejected) {
   /* invoke handlers based upon state transition */
 };

登入後複製

同时还需要两个方法来执行理从未完成到已完成和从未完成到拒绝的状态转变。

Promise.prototype.resolve = function (value) {
   /* move from unfulfilled to resolved */
 };
 
 Promise.prototype.reject = function (error) {
   /* move from unfulfilled to rejected */
 };

登入後複製

现在搭建了一个promise的架子，我们可以继续上面的示例，假设只获取IE10的内容。创建一个方法来发送Ajax请求并将其封装在promise中。这个promise对象分别在xhr.onload和xhr.onerror中指定了完成和拒绝状态的转变过程，请注意searchTwitter函数返回的正是promise对象。然后，在loadTweets中，使用then方法设置完成和拒绝状态对应的回调函数。

function searchTwitter(term) {

  var url, xhr, results, promise;
  url = 'http://search.twitter.com/search.json&#63;rpp=100&q=' + term;
  promise = new Promise();
  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onload = function (e) {
    if (this.status === 200) {
      results = JSON.parse(this.responseText);
      promise.resolve(results);
    }
  };

  xhr.onerror = function (e) {
    promise.reject(e);
  };

  xhr.send();
  return promise;
}

function loadTweets() {
  var container = document.getElementById('container');
  searchTwitter('#IE10').then(function (data) {
    data.results.forEach(function (tweet) {
      var el = document.createElement('li');
      el.innerText = tweet.text;
      container.appendChild(el);
    });
  }, handleError);
}

登入後複製

到目前为止，我们可以把promise模式应用于单个Ajax请求，似乎还体现不出promise的优势来。下面来看看多个Ajax请求的并发协作。此时，我们需要另一个方法when来存储准备调用的promise对象。一旦某个promise从未完成状态转化为完成或者拒绝状态，then方法里对应的处理函数就会被调用。when方法在需要等待所有操作都完成的时候至关重要。

Promise.when = function () {
  /* handle promises arguments and queue each */
};

登入後複製

以刚才获取IE10和IE9两块内容的场景为例，我们可以这样来写代码：

var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {

  /* Reshuffle due to date */
  var totalResults = concatResults(data1.results, data2.results);
  totalResults.forEach(function (tweet) {
    var el = document.createElement('li');
    el.innerText = tweet.text;
    container.appendChild(el);
  });
}, handleError);

登入後複製

分析上面的代码可知，when函数会等待两个promise对象的状态发生变化再做具体的处理。在实际的Promise库中，when函数有很多变种，比如 when.some()、when.all()、when.any()等，读者从函数名字中大概能猜出几分意思来，详细的说明可以参考CommonJS的一个promise实现when.js。

除了CommonJS，其他主流的Javascript框架如jQuery、Dojo等都存在自己的promise实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取Dojo为例，看一看它的实现有什么异同。

Dojo框架里实现promise模式的对象是Deferred，该对象也有then函数用于处理完成和拒绝状态并支持串联，同时还有resolve和reject，功能如之前所述。下面的代码完成了Twitter的场景：

function searchTwitter(term) {

  var url, xhr, results, def;
  url = 'http://search.twitter.com/search.json&#63;rpp=100&q=' + term;
  def = new dojo.Deferred();
  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onload = function (e) {
    if (this.status === 200) {
      results = JSON.parse(this.responseText);
      def.resolve(results);
    }
  };

  xhr.onerror = function (e) {
    def.reject(e);
  };

  xhr.send();
  return def;
}

dojo.ready(function () {
  var container = dojo.byId('container');
  searchTwitter('#IE10').then(function (data) {
    data.results.forEach(function (tweet) {
      dojo.create('li', {
        innerHTML: tweet.text
      }, container);
    });
  });
});

登入後複製

不仅如此，类似dojo.xhrGet方法返回的即是dojo.Deferred对象，所以无须自己包装promise模式。

var deferred = dojo.xhrGet({
  url: "search.json",
  handleAs: "json"
});

deferred.then(function (data) {
  /* handle results */
}, function (error) {
  /* handle error */
});

登入後複製

除此之外，Dojo还引入了dojo.DeferredList,支持开发人员同时处理多个dojo.Deferred对象，这其实就是上面所提到的when方法的另一种表现形式。

dojo.require("dojo.DeferredList");
dojo.ready(function () {
  var container, def1, def2, defs;
  container = dojo.byId('container');
  def1 = searchTwitter('#IE10');
  def2 = searchTwitter('#IE9');

  defs = new dojo.DeferredList([def1, def2]);

  defs.then(function (data) {
    // Handle exceptions
    if (!results[0][0] || !results[1][0]) {
      dojo.create("li", {
        innerHTML: 'an error occurred'
      }, container);
      return;
    }
    var totalResults = concatResults(data[0][1].results, data[1][1].results);

    totalResults.forEach(function (tweet) {
      dojo.create("li", {
        innerHTML: tweet.text
      }, container);
    });
  });
});

登入後複製

上面的代码比较清楚，不再详述。

说到这里，读者可能已经对promise模式有了一个比较完整的了解，异步编程会变得越来越重要，在这种情况下，我们需要找到办法来降低复杂度，promise模式就是一个很好的例子，它的风格比较人性化，而且主流的JS框架提供了自己的实现。所以在编程实践中，开发人员应该尝试这种便捷的编程技巧。需要注意的是，promise模式的使用需要恰当地设置promise对象，在对应的事件中调用状态转换函数，并且在最后返回promise对象。

詳解JavaScript非同步程式設計中jQuery的promise物件的作用_jquery