【www.bbyears.com--网页配色】
Promise核心说明
尽管Promise已经有自己的规范，但目前的各类Promise库，在Promise的实现细节上是有差异的，部分API甚至在意义上完全不同。但Promise的核心内容，是相通的，它就是then方法。在相关术语中，promise指的就是一个有then方法，且该方法能触发特定行为的对象或函数。
Promise可以有不同的实现方式，因此Promise核心说明并不会讨论任何具体的实现代码。
先阅读Promise核心说明的意思是：看，这就是需要写出来的结果，请参照这个结果想一想怎么用代码写出来吧。
起步：用这一种方式理解Promise
回想一下Promise解决的是什么问题？回调。例如，函数doMission1()代表第一件事情，现在，我们想要在这件事情完成后，再做下一件事情doMission2()，应该怎么做呢？
先看看我们常见的回调模式。doMission1()说：“你要这么做的话，就把doMission2()交给我，我在结束后帮你调用。”所以会是：
doMission1(doMission2);
Promise模式又是如何呢？你对doMission1()说：“不行，控制权要在我这里。你应该改变一下，你先返回一个特别的东西给我，然后我来用这个东西安排下一件事。”这个特别的东西就是Promise，这会变成这样：
doMission1().then(doMission2);
可以看出，Promise将回调模式的主从关系调换了一个位置（翻身做主人！），多个事件的流程关系，就可以这样集中到主干道上（而不是分散在各个事件函数之内）。
好了，如何做这样一个转换呢？从最简单的情况来吧，假定doMission1()的代码是：
function doMission1(callback){
var value = 1;
callback(value);
}
那么，它可以改变一下，变成这样：
function doMission1(){
return {
then: function(callback){
var value = 1;
callback(value);
}
};
}
这就完成了转换。虽然并不是实际有用的转换，但到这里，其实已经触及了Promise最为重要的实现要点，即Promise将返回值转换为带then方法的对象。
进阶：Q的设计路程
从defer开始
design/q0.js是Q初步成型的第一步。它创建了一个名为defer的工具函数，用于创建Promise：
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
},
then: function (callback) {
if (pending) {
pending.push(callback);
} else {
callback(value);
}
}
}
};
这段源码可以看出，运行defer()将得到一个对象，该对象包含resolve和then两个方法。请回想一下jQuery的Deferred（同样有resolve和then），这两个方法将会是近似的效果。then会参考pending的状态，如果是等待状态则将回调保存（push），否则立即调用回调。resolve则将肯定这个Promise，更新值的同时运行完所有保存的回调。defer的使用示例如下：
var oneOneSecondLater = function () {
var result = defer();
setTimeout(function () {
result.resolve(1);
}, 1000);
return result;
};
oneOneSecondLater().then(callback);
这里oneOneSecondLater()包含异步内容（setTimeout），但这里让它立即返回了一个defer()生成的对象，然后将对象的resolve方法放在异步结束的位置调用（并附带上值，或者说结果）。
到此，以上代码存在一个问题：resolve可以被执行多次。因此，resolve中应该加入对状态的判断，保证resolve只有一次有效。这就是Q下一步的design/q1.js（仅差异部分）：
resolve: function (_value) {
if (pending) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
} else {
throw new Error("A promise can only be resolved once.");
}
}
对第二次及更多的调用，可以这样抛出一个错误，也可以直接忽略掉。
分离defer和promise
在前面的实现中，defer生成的对象同时拥有then方法和resolve方法。按照定义，promise关心的是then方法，至于触发promise改变状态的resolve，是另一回事。所以，Q接下来将拥有then方法的promise，和拥有resolve的defer分离开来，各自独立使用。这样就好像划清了各自的职责，各自只留一定的权限，这会使代码逻辑更明晰，易于调整。请看design/q3.js：（q2在此跳过）
var isPromise = function (value) {
return value && typeof value.then === "function";
};
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
}
},
promise: {
then: function (callback) {
if (pending) {
pending.push(callback);
} else {
callback(value);
}
}
}
};
};
如果你仔细对比一下q1，你会发现区别很小。一方面，不再抛出错误（改为直接忽略第二次及更多的resolve），另一方面，将then方法移动到一个名为promise的对象内。到这里，运行defer()得到的对象（就称为defer吧），将拥有resolve方法，和一个promise属性指向另一个对象。这另一个对象就是仅有then方法的promise。这就完成了分离。
前面还有一个isPromise()函数，它通过是否有then方法来判断对象是否是promise（duck-typing的判断方法）。为了正确使用和处理分离开的promise，会像这样需要将promise和其他值区分开来。
实现promise的级联
接下来会是相当重要的一步。到前面到q3为止，所实现的promise都是不能级联的。但你所熟知的promise应该支持这样的语法：
promise.then(step1).then(step2);
以上过程可以理解为，promise将可以创造新的promise，且取自旧的promise的值（前面代码中的value）。要实现then的级联，需要做到一些事情：
then方法必须返回promise。
这个返回的promise必须用传递给then方法的回调运行后的返回结果，来设置自己的值。
传递给then方法的回调，必须返回一个promise或值。
design/q4.js中，为了实现这一点，新增了一个工具函数ref：
var ref = function (value) {
if (value && typeof value.then === "function")
return value;
return {
then: function (callback) {
return ref(callback(value));
}
};
};
这是在着手处理与promise关联的value。这个工具函数将对任一个value值做一次包装，如果是一个promise，则什么也不做，如果不是promise，则将它包装成一个promise。注意这里有一个递归，它确保包装成的promise可以使用then方法级联。为了帮助理解它，下面是一个使用的例子：
ref("step1").then(function(value){
console.log(value); // "step1"
return 15;
}).then(function(value){
console.log(value); // 15
});
你可以看到value是怎样传递的，promise级联需要做到的也是如此。
design/q4.js通过结合使用这个ref函数，将原来的defer转变为可级联的形式：
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = ref(_value); // values wrapped in a promise
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
value.then(callback); // then called instead
}
pending = undefined;
}
},
promise: {
then: function (_callback) {
var result = defer();
// callback is wrapped so that its return
// value is captured and used to resolve the promise
// that "then" returns
var callback = function (value) {
result.resolve(_callback(value));
};
if (pending) {
pending.push(callback);
} else {
value.then(callback);
}
return result.promise;
}
}
};
};
原来callback(value)的形式，都修改为value.then(callback)。这个修改后效果其实和原来相同，只是因为value变成了promise包装的类型，会需要这样调用。
then方法有了较多变动，会先新生成一个defer，并在结尾处返回这个defer的promise。请注意，callback不再是直接取用传递给then的那个，而是在此基础之上增加一层，并把新生成的defer的resolve方法放置在此。此处可以理解为，then方法将返回一个新生成的promise，因此需要把promise的resolve也预留好，在旧的promise的resolve运行后，新的promise的resolve也会随之运行。这样才能像管道一样，让事件按照then连接的内容，一层一层传递下去。
加入错误处理
promise的then方法应该可以包含两个参数，分别是肯定和否定状态的处理函数（onFulfilled与onRejected）。前面我们实现的promise还只能转变为肯定状态，所以，接下来应该加入否定状态部分。
请注意，promise的then方法的两个参数，都是可选参数。design/q6.js（q5也跳过）加入了工具函数reject来帮助实现promise的否定状态：
var reject = function (reason) {
return {
then: function (callback, errback) {
return ref(errback(reason));
}
};
};
它和ref的主要区别是，它返回的对象的then方法，只会取第二个参数的errback来运行。design/q6.js的其余部分是：
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = ref(_value);
for (var i = 0, ii = pending.length; i < ii; i++) {
value.then.apply(value, pending[i]);
}
pending = undefined;
}
},
promise: {
then: function (_callback, _errback) {
var result = defer();
// provide default callbacks and errbacks
_callback = _callback || function (value) {
// by default, forward fulfillment
return value;
};
_errback = _errback || function (reason) {
// by default, forward rejection
return reject(reason);
};
var callback = function (value) {
result.resolve(_callback(value));
};
var errback = function (reason) {
result.resolve(_errback(reason));
};
if (pending) {
pending.push([callback, errback]);
} else {
value.then(callback, errback);
}
return result.promise;
}
}
};
};
这里的主要改动是，将数组pending只保存单个回调的形式，改为同时保存肯定和否定的两种回调的形式。而且，在then中定义了默认的肯定和否定回调，使得then方法满足了promise的2个可选参数的要求。
你也许注意到defer中还是只有一个resolve方法，而没有类似jQuery的reject。那么，错误处理要如何触发呢？请看这个例子：
var defer1 = defer(),
promise1 = defer1.promise;
promise1.then(function(value){
console.log("1: value = ", value);
return reject("error happens");
}).then(function(value){
console.log("2: value = ", value);
}).then(null, function(reason){
console.log("3: reason = ", reason);
});
defer1.resolve(10);
// Result:
// 1: value = 10
// 3: reason = error happens
可以看出，每一个传递给then方法的返回值是很重要的，它将决定下一个then方法的调用结果。而如果像上面这样返回工具函数reject生成的对象，就会触发错误处理。
融入异步
终于到了最后的design/q7.js。直到前面的q6，还存在一个问题，就是then方法运行的时候，可能是同步的，也可能是异步的，这取决于传递给then的函数（例如直接返回一个值，就是同步，返回一个其他的promise，就可以是异步）。这种不确定性可能带来潜在的问题。因此，Q的后面这一步，是确保将所有then转变为异步。
design/q7.js定义了另一个工具函数enqueue：
var enqueue = function (callback) {
//process.nextTick(callback); // NodeJS
setTimeout(callback, 1); // Na?ve browser solution
};
显然，这个工具函数会将任意函数推迟到下一个事件队列运行。
design/q7.js其他的修改点是（只显示修改部分）：
var ref = function (value) {
// ...
return {
then: function (callback) {
var result = defer();
// XXX
enqueue(function () {
result.resolve(callback(value));
});
return result.promise;
}
};
};
var reject = function (reason) {
return {
then: function (callback, errback) {
var result = defer();
// XXX
enqueue(function () {
result.resolve(errback(reason));
});
return result.promise;
}
};
};
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
// ...
enqueue(function () {
value.then.apply(value, pending[i]);
});
// ...
},
promise: {
then: function (_callback, _errback) {
// ...
enqueue(function () {
value.then(callback, errback);
});
// ...
}
}
};
};
即把原来的value.then的部分，都转变为异步。
到此，Q提供的Promise设计原理q0~q7，全部结束。
结语
即便本文已经是这么长的篇幅，但所讲述的也只到基础的Promise。大部分Promise库会有更多的API来应对更多和Promise有关的需求，例如all()、spread()，不过，读到这里，你已经了解了实现Promise的核心理念，这一定对你今后应用Promise有所帮助。
在我看来，Promise是精巧的设计，我花了相当一些时间才差不多理解它。Q作为一个典型Promise库，在思路上走得很明确。可以感受到，再复杂的库也是先从基本的要点开始的，如果我们自己要做类似的事，也应该保持这样的心态一点一点进步。
JavaScript异步编程的Promise模式
异步模式在web编程中变得越来越重要，对于web主流语言Javascript来说，这种模式实现起来不是很利索，为此，许多Javascript库（比如 jQuery和Dojo）添加了一种称为promise的抽象（有时也称之为deferred）。通过这些库，开发人员能够在实际编程中使用 promise模式。IE官方博客最近发表了一篇文章，详细讲述了如何使用XMLHttpRequest2来实践promise模式。我们来了解一下相关的概念和应用。
考虑这样一个例子，某网页存在异步操作（通过XMLHttpRequest2或者 Web Workers）。随着Web 2.0技术的深入，浏览器端承受了越来越多的计算压力，所以“并发”具有积极的意义。对于开发人员来说，既要保持页面与用户的交互不受影响，又要协调页面与异步任务的关系，这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈，我们能够想到对于异步调用需要处理两种结果――成功操作和失败处理。在成功的调用后，我们可能需要把返回的结果用在另一个Ajax请求中，这就会出现“函数连环套”的情况（在笔者的另一篇文章《NodeJS的异步编程风格》中有详细的解释）。这种情况会造成编程的复杂性。看看下面的代码示例（基于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);
}
上面的代码其功能是获取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?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?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对象。
技术社区对异步编程的关注也在升温，国内社区也发出了自己的声音。资深技术专家老赵就发布了一套开源的异步开发辅助库Jscex，它的设计很巧妙，抛弃了回调函数的编程方式，采用一种“线性编码、异步执行”的思想。