异步编程when.js

when.js很小，压缩后只有数kb，gzip后的大小几乎能够忽略。在Node和浏览器环境里均可以使用when.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
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

这段代码完成了三个任务：1)获取数据；2)加载图片；3)显示图片，其中，任务1和2是异步，3是同步，使用的是最多见的callback机制来处理异步逻辑，好处是浅显易懂，缺点是强耦合、不直观、处理异常麻烦等等。

咱们尝试用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
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

看最后三行代码，是否是一目了然，很是的语义化？来看下改写后的任务一、2多了些什么：

var deferred = when.defer();

• 1

定义了一个deferred对象。

deferred.resolve(data);

• 1

在异步获取数据完成时，把数据做为参数，调用deferred对象的resolve方法。

return deferred.promise;

• 1

返回了deferred对象的promise属性。 
在Promises/A规范中，每一个任务都有三种状态：默认(pending)、完成(fulfilled)、失败(rejected)。

• 默认状态能够单向转移到完成状态，这个过程叫resolve，对应的方法是deferred.resolve(promiseOrValue)；
• 默认状态还能够单向转移到失败状态，这个过程叫reject，对应的方法是deferred.reject(reason)；
• 默认状态时，还能够经过deferred.notify(update)来宣告任务执行信息，如执行进度；
• 状态的转移是一次性的，一旦任务由初始的pending转为其余状态，就会进入到下一个任务的执行过程当中。

有人可能会以为奇怪：改变任务状态的resolve和reject方法是定义在deferred对象上，但最后返回的倒是deferred的promise属性。这么作一是由于规范就是这么定的，二是能够防止任务状态被外部改变。 
then有三个参数，分别是onFulfilled、onRejected、onProgress，经过这三个参数，就能够指定上一个任务在resolve、reject和notify时该如何处理。例如上一个任务被resolve(data)，onFulfilled函数就会被触发，data做为它的参数；被reject(reason)，那么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 + '%'; } );

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

then会传递错误，也就是说有多个任务串行执行时，咱们能够只在最后一个then定义onRejected。只定义了onRejected的then等同于otherwise，也就是说 otherwise(onRejected) 是 then(undefined, onRejected) 的简便写法。 
then会在try..catch..的包裹之下执行任务，因此任务的异常都会被when.js捕获，当作失败状态处理，相似这样：

try { ... } catch (e) { deferred.reject(e); }

• 1
• 2
• 3
• 4
• 5

在任务状态改变以后再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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

若是咱们只是想把一个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"}] */ });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

有时候，咱们须要引入任务竞争机制，例如从一批cdn中找到最快的那个，when.any就派上用场了，when.any接受promise数组，在其中任何一个resolve后就接着执行后续任务了。若是要在一批promise中某几个resolve后执行后续任务，能够用when.some，它比when.any多一个howMany的参数。 
Promise给异步编程代码带来了巨大的方便，今后咱们能够更专一单个任务的实现，promise会很好的替咱们解决任务调度问题。when.js提供的功能远远不止本文提到的这些，有兴趣的同窗能够前往官方api文档了解更多。

github：https://github.com/cujojs/when#legacy-environments 
via：Jerry Qu 
本文连接：https://imququ.com/post/promises-when-js.html