这篇文章可以看作是屈屈同学关于when.js的文章《异步编程:When.js快速上手》的续篇。
屈屈的文章中详细介绍了when.js,在这里关于when.js的使用我就不多复述了,大家可以自己去研究它的API。
在这里,我主要想讨论的是如何实现一个when.js类似的promise/A框架。为了更清晰了解实现原理,我略过when.js中一些比较强大的功能,只实现其中最核心的功能,包括基本的then(),otherwise()以及比较好用的all()和any()。
下面看一下Promise的基本数据结构:
function Promise(){
this._resolves = [];
this._rejects = [];
this._readyState = Promise.PENDING;
this._data = null;
this._reason = null;
}
mix(Promise, {
PENDING : 0,
FULFILLED : 1,
REJECTED : 2,
isPromise: function(obj){
return obj != null && typeof obj['then'] == 'function';
}
});
我们可以看到,一个Promise包含五个属性,一个resolves数组用来存放当状态转换为FULFILLED之时需要执行的动作,rejects数组用来存放当状态转换为REJECTED时需要执行的动作,一个readyState属性用来存放当前的Promise对象的状态,一个data属性用来存放调用resolve时传递参数,一个_reason属性用来存放调用reject时传递的参数。
详细的参数说明我们继续看后面的实现会比较明白:
mix(Promise.prototype, {
then: function(onFulfilled, onRejected){
var deferred = new Defer();
function fulfill(data){
var ret = onFulfilled ? onFulfilled(data) : data;
if(Promise.isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
}
if(this._readyState === Promise.PENDING){
this._resolves.push(fulfill);
if(onRejected){
this._rejects.push(onRejected);
}else{
//为了让reject向后传递
this._rejects.push(function(reason){
deferred.reject(reason);
});
}
}else if(this._readyState === Promise.FULFILLED){
var self = this;
setTimeout(function(){
fulfill(self._data);
});
}
return deferred.promise;
},
otherwise: function(onRejected){
return this.then(undefined, onRejected);
}
});
Promise.prototype.then 是整个组件里面最复杂的地方,代码直接阅读可能看起来会比较不明白,我后面会详细讲,在这里先暂时把这个方法做一个简化,便于大家理解其中最核心的内容:
mix(Promise.prototype, {
then: function(onFulfilled, onRejected){
if(this._readyState === Promise.PENDING){
if(onFulfilled){
this._resolves.push(onFulfilled);
}
if(onRejected){
this._rejects.push(onRejected);
}
}else if(this._readyState === Promise.FULFILLED){
return onFulfilled && onFulfilled(this._data);
}
},
otherwise: function(onRejected){
return this.onFulfilled(undefined, onRejected);
}
});
简化成这样,看起来就简单明了了吧,实际上就是当Promise状态为PENDING的时候,如果有执行then,需要将onFulfilled和onReject暂存起来,等到真正的异步操作执行完成后再触发。那么为什么这样简单的写法不行,需要上面那种复杂写法呢?我们慢慢来往下看—— resolve和reject两个方法就很简单了,实际上就是看是否有暂存起来的操作需要执行,如果有的话,就把这些操作执行了。
function Defer(){
this.promise = new Promise();
}
mix(Defer.prototype,{
resolve: function(data){
var promise = this.promise;
if(promise._readyState != Promise.PENDING){
return;
}
promise._readyState = Promise.FULFILLED;
promise._data = data;
ArrayH.forEach(promise._resolves, function(handler){
handler(data);
});
},
reject: function(reason){
var promise = this.promise;
if(promise._readyState != Promise.PENDING){
return;
}
promise._readyState = Promise.REJECTED;
promise._reason = reason;
var handler = promise._rejects[0];
if(handler){
handler(reason);
}
}
});
这里我用了和when.js一样的思路,将resolve和reject定义在一个新的Defer对象上,这样是为了将这两个方法封装在使用promise的方法内部,避免使用者让promise在外部操作状态改变,从而增加程序复杂度。 有了这个Defer之后,我们就可以很方便地将一个方法写成Promise了——
function Test(){
var deferred = new Defer();
QW.getJSONP(api, function(data){
deferred.resolve(data[0]);
});
return deferred.promise;
}
写法上是不是跟when.js一样?
但是简化版的Promise有个很重要的问题没有解决——then的链式调用。因为如果没有链式调用,就没法解决异步嵌套的问题,那样promise也就失去了存在的意义。
现在我们再回过头来看看为什么要写复杂的then——
mix(Promise.prototype, {
then: function(onFulfilled, onRejected){
var deferred = new Defer();
function fulfill(data){
var ret = onFulfilled ? onFulfilled(data) : data;
if(Promise.isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
}
if(this._readyState === Promise.PENDING){
this._resolves.push(fulfill);
if(onRejected){
this._rejects.push(onRejected);
}else{
//为了让reject向后传递
this._rejects.push(function(reason){
deferred.reject(reason);
});
}
}else if(this._readyState === Promise.FULFILLED){
var self = this;
setTimeout(function(){
fulfill(self._data);
});
}
return deferred.promise;
},
otherwise: function(onRejected){
return this.then(undefined, onRejected);
}
});
我们看一下类似于下面这种调用情况——
var getData = function() {
var deferred = when.defer();
$.getJSON(api, function(data){
deferred.resolve(data[0]);
});
return deferred.promise;
}
var getImg = function(src) {
var deferred = when.defer();
var img = new Image();
img.onload = function() {
deferred.resolve(img);
};
img.src = src;
return deferred.promise;
}
var showImg = function(img) {
$(img).appendTo($('#container'));
}
getData()
.then(getImg)
.then(showImg);
这段代码在屈屈童鞋的那篇文章中出现,它最重要的是 getData().then(getImg).then(showImg) 这种链式形式,表示先通过jsonp获得image数据,然后再通过数据展现出图片,这种化异步嵌套为可读性更好的链式调用形式正是promise规范存在的意义所在,那么如何实现这一点呢?
仔细观察可以发现,如果把前面两级看作一个整体,(getData().then(getImg)).then(showImg)显然是一个单一的promise,这个promise我们可以通过一个范式来表达一下——
A().then(B).then(C) => A().then(B) ==
(function(){
var deferred = new Defer();
A().then(function(){
var ret = B.apply(this, arguments);
if(isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
});
return deferred.promise;
})();
上面这个代码是什么意思呢?其实就是说,要实现A().then(B).then(C),其实等价于需要 A().then(B)返回一个新的Promise,而这个新的Promise是相当于当then(B)中的B被调用的时候,执行resolve操作,所以用以下方法传给A的resolve队列替代原先的"B"方法即可——
function(){
var ret = B.apply(this, arguments);
if(isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
}
想通了上面这一点,就好理解那个复杂的then了,正是做了这件事情,用下面的方法——
function(){
var ret = onFulfilled.apply(this, arguments);
if(isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
}
替代了直接push进onFulfilled到_resolves。
讲到这里,我想强调一下,promise规范的神奇之处就在这里了——我们恰恰是用了promise规范本身实现了这个规范实现的最难之处——then的链式调用~
写通了这个核心部分,那么剩下的功能就不复杂了,我们既然可以用promise规范来实现promise本身的核心代码,当然也可以用它来实现all和any等功能了,那些相对来说都会是非常简单的问题——
QW.P = {
defer: function(){
return new Defer();
},
all: function(promises){
var deferred = QW.P.defer();
var n = 0, result = [];
ArrayH.forEach(promises, function(promise){
promise.then(function(ret){
result.push(ret);
n++;
if(n >= promises.length){
deferred.resolve(result);
}
});
});
return deferred.promise;
},
any: function(promises){
var deferred = QW.P.defer();
ArrayH.forEach(promises, function(promise){
promise.then(function(ret){
deferred.resolve(ret);
});
});
return deferred.promise;
}
};
QW.defer = QW.P.defer;
从上面的代码可以看到,all和any都可以通过promise本身轻松实现,其逻辑并不复杂。顺便我们实现了QW.P.defer()这个语法糖。上面的代码的例子是基于QWrap的,但是我们会发现将它独立出来并不复杂,因为它只是依赖于ArrayH.forEach和ObjectH.mix,直接从QW中copy过来这两个方法就好了。
最后我们看一下完整的代码——
(function(){
var mix = QW.ObjectH.mix,
ArrayH = QW.ArrayH;
function Promise(){
this._resolves = [];
this._rejects = [];
this._readyState = Promise.PENDING;
this._data = null;
this._reason = null;
}
mix(Promise.prototype, {
then: function(onFulfilled, onRejected){
var deferred = new Defer();
function fulfill(data){
var ret = onFulfilled ? onFulfilled(data) : data;
if(Promise.isPromise(ret)){
ret.then(function(data){
deferred.resolve(data);
});
}else{
deferred.resolve(ret);
}
return ret;
}
if(this._readyState === Promise.PENDING){
this._resolves.push(fulfill);
if(onRejected){
this._rejects.push(onRejected);
}else{
//为了让reject向后传递
this._rejects.push(function(reason){
deferred.reject(reason);
});
}
}else if(this._readyState === Promise.FULFILLED){
var self = this;
setTimeout(function(){
fulfill(self._data);
});
}
return deferred.promise;
},
otherwise: function(onRejected){
return this.then(undefined, onRejected);
}
});
mix(Promise, {
PENDING : 0,
FULFILLED : 1,
REJECTED : 2,
isPromise: function(obj){
return obj != null && typeof obj['then'] == 'function';
}
});
function Defer(){
this.promise = new Promise();
}
mix(Defer.prototype,{
resolve: function(data){
var promise = this.promise;
if(promise._readyState != Promise.PENDING){
return;
}
promise._readyState = Promise.FULFILLED;
promise._data = data;
ArrayH.forEach(promise._resolves, function(handler){
handler(data);
});
},
reject: function(reason){
var promise = this.promise;
if(promise._readyState != Promise.PENDING){
return;
}
promise._readyState = Promise.REJECTED;
promise._reason = reason;
var handler = promise._rejects[0];
if(handler){
handler(reason);
}
}
});
QW.P = {
defer: function(){
return new Defer();
},
isPromise: function(promiseOrValue){
return Promise.isPromise(promiseOrValue);
},
all: function(promises){
var deferred = QW.P.defer();
var n = 0, result = [];
ArrayH.forEach(promises, function(promise){
promise.then(function(ret){
result.push(ret);
n++;
if(n >= promises.length){
deferred.resolve(result);
}
});
});
return deferred.promise;
},
any: function(){
var deferred = QW.P.defer();
ArrayH.forEach(promises, function(promise){
promise.then(function(ret){
deferred.resolve(ret);
});
});
return deferred.promise;
}
};
QW.defer = QW.P.defer;
})();