前些天我在团内做了一个关于AngularJS的分享。由于AngularJS大量使用Promise，所以我把基于Promise的异步编程也一并介绍了下。很多东 西都是一带而过，这里再记录下。
AngularJS内置的是Kris Kowal的Q框架，我介绍的是自己用得更多的cujoJS的when.js，两者都是Promises/A规范的实现。whe n.js很小，压缩后只有数kb，gzip后的大小几乎可以忽略。在Node和浏览器环境里都可以使用when.js，唯一需要注意的是：在浏览器使用时，要先加几行 代码，再引入js文件。
首先，我们看一小段代码（在浏览器中预览）：
var getData = function(callback) {
$.getJSON(api, function(data){
callback(data[0]);
});
}
var getImg = function(src, callback) {
var img = new Image();
img.onload = function() {
callback(img);
};
img.src = src;
}
var showImg = function(img) {
$(img).appendTo($('#container'));
}
getData(function(data) {
getImg(data, function(img) {
showImg(img);
});
});
这段代码完成了三个任务：1)获取数据；2)加载图片；3)显示图片，其中，任务1和2是异步，3是同步，使用的是最常见的callback机制来处理异步逻辑，好处 是浅显易懂，缺点是强耦合、不直观、处理异常麻烦等等。
另外一种常见的实现异步编程的方案是事件监听器，例如使用QWrap的CustEvent，让任务成功时fireEvent，那么注册了这个Event的监听器就可以 收到这个事件，并收到事件传递过来的数据，Dom标准事件也是采用的这种形式。这种方案也很好理解，代码从略。事件监听可以解耦，可以绑定任意多个监听器，但是依然不 直观，而且事件发生之后再绑定的监听器也得不到触发。
我们尝试用when.js改写下这段代码（在浏览器中预览）：
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);
看最后三行代码，是不是一目了然，非常的语义化？来看下改写后的任务1、2多了些什么：
var deferred = when.defer();
定义了一个deferred对象。
deferred.resolve(data);
在异步获取数据完成时，把数据作为参数，调用deferred对象的resolve方法。
return deferred.promise;
返回了deferred对象的promise属性。
在Promises/A规范中，每个任务都有三种状态：默认(pending)、完成(fulfilled)、失败(rejected)。
有人可能会觉得奇怪：改变任务状态的resolve和reject方法是定义在deferred对象上，但最后返回的却是deferred的promise属性。这么 做一是因为规范就是这么定的，二是可以防止任务状态被外部改变。
then有三个参数，分别是onFulfilled、onRejected、onProgress，通过这三个参数，就可以指定上一个任务在resolve、reje ct和notify时该如何处理。例如上一个任务被resolve(data)，onFulfilled函数就会被触发，data作为它的参数；被reject(re ason)，那么onRejected就会被触发，收到reason。任何时候，onFulfilled和onRejected都只有其一可以被触发，并且只触发一次 ；onProgress顾名思义，每次notify时都会被调用。下面是reject和notify的用法（在浏览器中预览）：
function run() {
var deferred = when.defer();
var start = 1, end = 100;
(function() {
if(start <= end) {
deferred.notify(start++);
setTimeout(arguments.callee, 50);
} else {
deferred.reject('time out!');
}
})();
return deferred.promise;
}
run().then(undefined,
function(reason) {
alert(reason);
}, function(s) {
document.getElementById('output').innerHTML = s + '%';
}
);
then会传递错误，也就是说有多个任务串行执行时，我们可以只在最后一个then定义onRejected。只定义了onRejected的then等同于othe rwise，也就是说 otherwise(onRejected) 是 then(undefined, onRejected) 的简便写法。
then会在try..catch..的包裹之下执行任务，所以任务的异常都会被when.js捕获，当做失败状态处理，类似这样：
try {
...
} catch (e) {
deferred.reject(e);
}
在任务状态改变之后再then，依然可以正常工作，后续任务会立刻执行。如果要在多个任务最后做cleanup工作，而不管之前的任务成功与否，可以用ensure方 法。它只接受一个参数onFulfilledOrRejected，始终会执行。另外when.js还有一个always方法，即将废弃，建议大家不要使用。
回到上面加载图片的场景，如果把任务2变为：加载多张图片，全部完成后再执行任务3。这时候需要用到when.all，when.all接受一个promise数组， 返回promise，这个promise会在promise数组中每一个promise都resolve之后再resolve。说起来拗口，看代码就明白了（在浏览器 中预览）：
var getData = function() {
var deferred = when.defer();
$.getJSON(api, function(data){
var data = data.slice(0, 3);
deferred.resolve(data);
});
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 showImgs = function(imgs) {
$(imgs).appendTo($('#container'));
}
var getImgs = function(data) {
var deferreds = [];
for(var i = 0; i < data.length; i++) {
deferreds.push(getImg(data[i]));
}
return deferreds;
}
when.all(getData().then(getImgs)).then(showImgs);
如果我们只是想把一个promise数组挨个执行一遍，可以用when.settle：
var promise1 = function() {
var deferred = when.defer();
setTimeout(function() {
deferred.reject('A');
}, 2000);
return deferred.promise;
};
var promise2 = function() {
var deferred = when.defer();
setTimeout(function() {
deferred.resolve('B');
}, 2000);
return deferred.promise;
};
when.settle([promise1(), promise2()]).then(function(result) {
console.log(result); /*
[{"state":"rejected","reason":"A"},
{"state":"fulfilled","value":"B"}] */
});
有时候，我们需要引入任务竞争机制，例如从一批cdn中找到最快的那个，when.any就派上用场了，when.any接受promise数组，在其中任何一个re solve后就接着执行后续任务了。如果要在一批promise中某几个resolve后执行后续任务，可以用when.some，它比when.any多一个how Many的参数。
Promise给异步编程代码带来了巨大的方便，从此我们可以更专注单个任务的实现，promise会很好的替我们解决任务调度问题。when.js提供的功能远远不 止本文提到的这些，有兴趣的同学可以前往官方api文档了解更多。
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8