使用Promise可以表達一連串嵌套的異步操作。
每個Promise實例代表一個異步操作。
~~~
var p = new Promise(function (resolve) {
setTimeout(function () {
resolve({});
}, 100);
});
p.then(function (data) {
});
~~~
參數(shù)resolve將接受一個函數(shù)，該函數(shù)用于異步回調(diào)時傳遞結果。
然后Promise的實例使用then函數(shù)，便可以處理resolve傳遞過來的結果。
then可以鏈式操作，增強Promise的表達能力。每次執(zhí)行then部署的任務``相當于拋出一個新的Promise實例。
因此可以優(yōu)雅地表達在異步操作中拋出異步操作。
~~~
p.then(function (data) {
//p返回結果后執(zhí)行
return new Promise(p1);
}).then(function(data){
//p1返回結果后執(zhí)行
});
~~~
Promise有一套實現(xiàn)標準和使用方法，具體此處不再詳述。下文用ES代碼實現(xiàn)Promise這個輪子。
# 實現(xiàn)的范圍
Promise對象：
* Promise.resolve(value)//接受一個異步結果，返回一個成功的Promise實例。
* Promise.reject(reason)//接受一個異步錯誤，返回一個失敗的Promise實例。
Promise實例：
* Promise.prototype.then(onSuccess,onFailure)//接受兩個參數(shù)，配置異步成功和失敗時的處理函數(shù)，返回一個新的Promise實例。
* Promise.prototype.catch(onFailure)//接受一個參數(shù)，配置異步失敗時的處理函數(shù)，返回一個新的Promise實例。
# 代碼骨架
~~~
(function () {
"use strict";
//狀態(tài)枚舉
var emStatus = { pending: 0, resolved: 1, rejected: 2 };
var Promise = function (task) {
this.then = function (onSuccess, onFailure) {
};
this.catch = function (onFailure) {
};
var status = emStatus.pending,//任務的狀態(tài)
boxValue,//任務的結果
chain = { resolve, reject };//拋出的Promise實例的觸發(fā)裝置
var resolve = function (value) {
};
var reject = function (reason) {
};
//給異步（同步）操作注入resolve和reject
task(resolve, reject);
};
Promise.resolve = function (value) {
return new Promise(function (resolve) {
resolve(value);
});
};
Promise.reject = function (reason) {
return new Promise(function (resolve, reject) {
reject(reason);
});
};
return Promise;
})();
~~~
then和catch所部署的函數(shù)的觸發(fā)，取決于Promise實例的內(nèi)部狀態(tài)。所以then和catch寫進了Promise實例的構造函數(shù)，以引用包含Promise實例內(nèi)部狀態(tài)的環(huán)境。
如此一來，Promise實例只能被創(chuàng)建時注入的resolve和reject函數(shù)所觸發(fā)。這種具有內(nèi)部封閉性的對象才能稱得上是真正的對象。
Promise實例我設置了三個狀態(tài)變量。
* status為任務的狀態(tài)，有三個，未開始（pending），成功（resolved）和失敗（rejected）。
* boxValue為任務的結果，成功失敗的結果都會被保存。
* 因為then會拋出一個新的Promise實例，所以需要保存該實例的觸發(fā)裝置，使用chain保存resolve和reject觸發(fā)裝置。
Promise.resolve/Promise.reject如意義上的拋出一個新的成功/失敗Promise實例。
# 骨架的優(yōu)化和改進。
catch函數(shù)實際上相當于then(null,onFailure)。因此不用每次在構造函數(shù)中構造，只需要使用原型鏈的方式訪問。
同一個異步Promise實例的then函數(shù)可以被觸發(fā)多次，因此chain應該是個數(shù)組。
~~~
(function () {
"use strict";
var emStatus = { pending: 0, resolved: 1, rejected: 2 };
var Promise = function (task) {
this.then = function (onSuccess, onFailure) {
};
var status = emStatus.pending,
boxValue,
chainArr = [];
var resolve = function (value) {
};
var reject = function (reason) {
};
task(resolve, reject);
};
Promise.prototype = {
catch: function (onFailure) {
return this.then(null, onFailure);
}
};
Promise.resolve = function (value) {
return new Promise(function (resolve) {
resolve(value);
});
};
Promise.reject = function (reason) {
return new Promise(function (resolve, reject) {
reject(reason);
});
};
return Promise;
})();
~~~
此時只要實現(xiàn)then，resolve和reject。
# then
Promise實例使用then的時候，他可能有三種狀態(tài)。仍未觸發(fā)回調(diào)的pending，已經(jīng)有結果的resolved和rejected。
~~~
this.then = function (onSuccess, onFailure) {
switch (status) {
case emStatus.pending:
return new Promise(function (resolve, reject) {
var chain = {};
if (onSuccess) {
}
else {
chain.resolve = resolve;
}
if (onFailure) {
}
else {
chain.reject = reject;
}
chainArr.push(chain);
});
case emStatus.resolved:
if (onSuccess) {
}
else {
return Promise.resolve(boxValue);
}
case emStatus.rejected:
if (onFailure) {
}
else {
return Promise.reject(boxValue);
}
}
};
~~~
## pending
如果then沒有傳入?yún)?shù)，即沒有部署操作結果的處理函數(shù)。那么返回的Promise實例將繼承之前操作的結果。
如果pending狀態(tài)時部署了處理函數(shù)，那么在未來，將會用該函數(shù)對操作返回結果進行處理。被處理后的結果，將是一個resolved的結果。期間發(fā)生異常，將被判斷為rejected。
這個處理函數(shù)包括操作成功和失敗時的處理函數(shù)：
~~~
var result;
try {
result = on(value);
}
catch (e) {
reject(e);
return;
}
if (result instanceof Promise) {
result.then(function (value) {
resolve(value);
});
}
else {
resolve(result);
}
~~~
如果處理函數(shù)接著拋出一個Promise實例，那么需要等該Promise實例觸發(fā)回調(diào)后才把處理函數(shù)視為返回了結果。
以上就是處理函數(shù)的內(nèi)容，那么我們需要再將其抽象為下一個Promise的觸發(fā)裝置。
而且，因為處理函數(shù)包括成功和失敗的處理函數(shù)，所以可以抽象一個通用的模板。我給他取名nextPromise。
~~~
var nextPromise = function (on, resolve, reject) {
return function (value) {
var result;
try {
result = on(value);
}
catch (e) {
reject(e);
return;
}
if (result instanceof Promise) {
result.then(function (value) {
resolve(value);
});
}
else {
resolve(result);
}
};
};
~~~
使用該模板，就能生成下一個Promise的觸發(fā)裝置。
~~~
chain.resolve = nextPromise(onSuccess, resolve, reject);
~~~
## resolved和rejected
Promise實例完成狀態(tài)的then，情況比較簡單。只要保證返回結果一定是Promise就可以了，我給他取名getPromise。
~~~
var getPromise = function (on, value) {
var result;
try {
result = on(value);
}
catch (e) {
return Promise.reject(e);
}
if (result instanceof Promise) {
return result;
}
else {
return Promise.resolve(result);
}
};
~~~
## then
所以then的最終代碼是
~~~
this.then = function (onSuccess, onFailure) {
switch (status) {
case emStatus.pending:
return new Promise(function (resolve, reject) {
var chain = {};
if (onSuccess) {
chain.resolve = nextPromise(onSuccess, resolve, reject);
}
else {
chain.resolve = resolve;
}
if (onFailure) {
chain.reject = nextPromise(onFailure, resolve, reject);
}
else {
chain.reject = reject;
}
chainArr.push(chain);
});
case emStatus.resolved:
if (onSuccess) {
return getPromise(onSuccess, boxValue);
}
else {
return Promise.resolve(boxValue);
}
case emStatus.rejected:
if (onFailure) {
return getPromise(onFailure, boxValue);
}
else {
return Promise.reject(boxValue);
}
}
};
~~~
# resolve和reject
一個Promise實例的狀態(tài)只會被改變一次，再要改變的話就拋出異常吧。
改變Promise實例的狀態(tài)后，就是觸發(fā)之前所有使用then拋出的新Promise實例。
~~~
var resolve = function (value) {
if (status === emStatus.pending) {
status = emStatus.resolved;
boxValue = value;
chainArr.forEach(function (chain) {
chain.resolve(value);
});
}
else {
throw value;
}
};
~~~
實際上，reject跟resolve做同一樣的事情。
~~~
var reject = function (reason) {
if (status === emStatus.pending) {
status = emStatus.rejected;
boxValue = reason;
chainArr.forEach(function (chain) {
chain.reject(reason);
});
}
else {
throw reason;
}
};
~~~
# 最終代碼
~~~
(function () {
"use strict";
var emStatus = { pending: 0, resolved: 1, rejected: 2 };
var Promise = function (task) {
this.then = function (onSuccess, onFailure) {
switch (status) {
case emStatus.pending:
return new Promise(function (resolve, reject) {
var chain = {};
if (onSuccess) {
chain.resolve = nextPromise(onSuccess, resolve, reject);
}
else {
chain.resolve = resolve;
}
if (onFailure) {
chain.reject = nextPromise(onFailure, resolve, reject);
}
else {
chain.reject = reject;
}
chainArr.push(chain);
});
case emStatus.resolved:
if (onSuccess) {
return getPromise(onSuccess, boxValue);
}
else {
return Promise.resolve(boxValue);
}
case emStatus.rejected:
if (onFailure) {
return getPromise(onFailure, boxValue);
}
else {
return Promise.reject(boxValue);
}
}
};
var status = emStatus.pending,
boxValue,
chainArr = [];
var resolve = function (value) {
if (status === emStatus.pending) {
status = emStatus.resolved;
boxValue = value;
chainArr.forEach(function (chain) {
chain.resolve(value);
});
}
else {
throw value;
}
};
var reject = function (reason) {
if (status === emStatus.pending) {
status = emStatus.rejected;
boxValue = reason;
chainArr.forEach(function (chain) {
chain.reject(reason);
});
}
else {
throw reason;
}
};
try {
task(resolve, reject);
}
catch (e) {
reject(e);
}
};
Promise.prototype = {
catch: function (onFailure) {
return this.then(null, onFailure);
}
};
Promise.resolve = function (value) {
return new Promise(function (resolve) {
resolve(value);
});
};
Promise.reject = function (reason) {
return new Promise(function (resolve, reject) {
reject(reason);
});
};
var nextPromise = function (on, resolve, reject) {
return function (value) {
var result;
try {
result = on(value);
}
catch (e) {
reject(e);
return;
}
if (result instanceof Promise) {
result.then(function (value) {
resolve(value);
});
}
else {
resolve(result);
}
};
};
var getPromise = function (on, value) {
var result;
try {
result = on(value);
}
catch (e) {
return Promise.reject(e);
}
if (result instanceof Promise) {
return result;
}
else {
return Promise.resolve(result);
}
};
return Promise;
})();
~~~
