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的级联，需要做到一些事情：
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库，在思路上走得很明确。可以感受到，再复杂的库也是先从基本的要点开始的，如果我们自己要做类似的事，也应该保持这样的心态一点一点进步。
