详解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?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); }