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

看最后三行代码,是不是一目了然,非常的语义化?来看下改写后的任务1、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

异步编程when.js的更多相关文章

  1. ES6 --- JS异步编程的几种解决方法及其优缺点

    导言: 我们都知道 JS 是单线程的,这也正是异步编程对于 JS  很重要的原因,因为它无法忍受耗时太长的操作.正因如此有一系列的实现异步的方法. 方法一  setTimeout 常用于:定时器,动画 ...

  2. Promise和异步编程

    前面的话 JS有很多强大的功能,其中一个是它可以轻松地搞定异步编程.作为一门为Web而生的语言,它从一开始就需要能够响应异步的用户交互,如点击和按键操作等.Node.js用回调函数代替了事件,使异步编 ...

  3. 异步编程Promise/Deferred、多线程WebWorker

    长期以来JS都是以单线程的模式运行的,而JS又通常应用在操作用户界面和网络请求这些任务上.操作用户界面时不能进行耗时较长的操作否则会导致界面卡死,而网络请求和动画等就是耗时较长的操作.所以在JS中经常 ...

  4. 深入解析js异步编程利器Generator

    我们在编写Nodejs程序时,经常会用到回调函数,在一个操作执行完成之后对返回的数据进行处理,我简单的理解它为异步编程. 如果操作很多,那么回调的嵌套就会必不可少,那么如果操作非常多,那么回调的嵌套就 ...

  5. JS魔法堂:深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  6. js异步编程技巧一

    异步回调是js的一大特性,理解好用好这个特性可以写出很高质量的代码.分享一些实际用的一些异步编程技巧. 1.我们有些应用环境是需要等待两个http请求或IO操作返回后进行后续逻辑的处理.而这种情况使用 ...

  7. js异步编程

    前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...

  8. node.js整理 06异步编程

    回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...

  9. 异步编程:When.js快速上手

    前些天我在团内做了一个关于AngularJS的分享.由于AngularJS大量使用Promise,所以我把基于Promise的异步编程也一并介绍了下.很多东西都是一带而过,这里再记录下. Angula ...

随机推荐

  1. YTU 1004: 1、2、3、4、5...

    1004: 1.2.3.4.5... 时间限制: 1000 Sec  内存限制: 64 MB 提交: 1275  解决: 343 题目描述 浙江工商大学校园里绿树成荫,环境非常舒适,因此也引来一批动物 ...

  2. 【转】Java 并发编程:volatile的使用及其原理

    一.volatile的作用 在<Java并发编程:核心理论>一文中,我们已经提到过可见性.有序性及原子性问题,通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果 ...

  3. Java使用动态代理实现AOP

    参考资料: http://www.importnew.com/15420.htmlhttp://www.cnblogs.com/techyc/p/3455950.html Spring是借助了动态代理 ...

  4. ExtJS 4 MVC Viewport和card布局

    http://ext4all.com/post/a-little-bit-strange-navigation 效果图:  app/view/Viewport.js Ext.define('App.v ...

  5. bzoj1483: [HNOI2009]梦幻布丁(vector+启发式合并)

    1483: [HNOI2009]梦幻布丁 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 4022  Solved: 1640[Submit][Statu ...

  6. spring boot启动报错Error starting ApplicationContext(未能配置数据源)

    主要错误:Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource c ...

  7. Docker的基础知识与安装(Ubantu CentOS)

    Docker是一种允许特殊类型虚拟化的实用程序.Docker允许使用Docker镜像在系统上“虚拟”运行程序.可以下载或创建可以运行的图像.一旦加载并执行了图像,它现在就是一个容器.容器已为容器内的程 ...

  8. 【SpringCloud构建微服务系列】Feign的使用详解

    一.简介 在微服务中,服务消费者需要请求服务生产者的接口进行消费,可以使用SpringBoot自带的RestTemplate或者HttpClient实现,但是都过于麻烦. 这时,就可以使用Feign了 ...

  9. Qt对象模型之二:对象树与元对象系统

    一.对象树的概念 Qt中使用对象树(object tree)来组织和管理所有的QObject类及其子类的对象.当创建一个QObject时,如果使用了其他的对象作为其父对象(parent),那么这个 Q ...

  10. Qt之界面(自定义标题栏、无边框、可移动、缩放)

    效果 自定义标题栏 titleBar.h #ifndef TITLEBAR_H #define TITLEBAR_H #include <QLabel> #include <QPus ...