异步编程:When.js快速上手
来源:互联网 发布:淘宝子账号登陆错误202 编辑:程序博客网 时间:2024/04/30 00:04
前些天我在团内做了一个关于AngularJS的分享。由于AngularJS大量使用Promise,所以我把基于Promise的异步编程也一并介绍了下。很多东西都是一带而过,这里再记录下。
AngularJS内置的是Kris Kowal的Q框架,我介绍的是自己用得更多的cujoJS的when.js,两者都是Promises/A规范的实现。when.js很小,压缩后只有数kb,gzip后的大小几乎可以忽略。在Node和浏览器环境里都可以使用when.js,唯一需要注意的是:在浏览器使用时,要先加几行代码,再引入js文件。
首先,我们看一小段代码(在浏览器中预览):
这段代码完成了三个任务:1)获取数据;2)加载图片;3)显示图片,其中,任务1和2是异步,3是同步,使用的是最常见的callback机制来处理异步逻辑,好处是浅显易懂,缺点是强耦合、不直观、处理异常麻烦等等。
另外一种常见的实现异步编程的方案是事件监听器,例如使用QWrap的CustEvent,让任务成功时fireEvent,那么注册了这个Event的监听器就可以收到这个事件,并收到事件传递过来的数据,Dom标准事件也是采用的这种形式。这种方案也很好理解,代码从略。事件监听可以解耦,可以绑定任意多个监听器,但是依然不直观,而且事件发生之后再绑定的监听器也得不到触发。
我们尝试用when.js改写下这段代码(在浏览器中预览):
看最后三行代码,是不是一目了然,非常的语义化?来看下改写后的任务1、2多了些什么:
定义了一个deferred对象。
在异步获取数据完成时,把数据作为参数,调用deferred对象的resolve方法。
返回了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的用法(在浏览器中预览):
then会传递错误,也就是说有多个任务串行执行时,我们可以只在最后一个then定义onRejected。只定义了onRejected的then等同于otherwise,也就是说 otherwise(onRejected) 是 then(undefined, onRejected) 的简便写法。
then会在try..catch..的包裹之下执行任务,所以任务的异常都会被when.js捕获,当做失败状态处理,类似这样:
在任务状态改变之后再then,依然可以正常工作,后续任务会立刻执行。如果要在多个任务最后做cleanup工作,而不管之前的任务成功与否,可以用ensure方法。它只接受一个参数onFulfilledOrRejected,始终会执行。另外when.js还有一个always方法,即将废弃,建议大家不要使用。
回到上面加载图片的场景,如果把任务2变为:加载多张图片,全部完成后再执行任务3。这时候需要用到when.all,when.all接受一个promise数组,返回promise,这个promise会在promise数组中每一个promise都resolve之后再resolve。说起来拗口,看代码就明白了(在浏览器中预览):
如果我们只是想把一个promise数组挨个执行一遍,可以用when.settle:
有时候,我们需要引入任务竞争机制,例如从一批cdn中找到最快的那个,when.any就派上用场了,when.any接受promise数组,在其中任何一个resolve后就接着执行后续任务了。如果要在一批promise中某几个resolve后执行后续任务,可以用when.some,它比when.any多一个howMany的参数。
Promise给异步编程代码带来了巨大的方便,从此我们可以更专注单个任务的实现,promise会很好的替我们解决任务调度问题。when.js提供的功能远远不止本文提到的这些,有兴趣的同学可以前往官方api文档了解更多。
本文链接:http://imququ.com/post/promises-when-js.html
--EOF--
- 异步编程:When.js快速上手
- 异步编程:When.js快速上手
- js异步编程上手
- Vue.js快速上手。
- vue.js快速上手
- Python 编程快速上手
- python编程快速上手
- Android数据库编程快速上手
- Shell脚本编程快速上手
- Vue.js 2.0 详细教程 快速上手
- Vue.js 2.0 快速上手精华梳理
- js模板引擎artTemplate快速上手
- Vue.js状态管理工具Vuex快速上手
- 如何快速上手一门编程语言
- Qt图形和线程编程快速上手
- js异步编程学习
- node.js异步编程
- JS异步编程
- HDU-1040- As Easy As A+B-选择排序+冒泡排序
- POJ - 3311 Hie with the Pie (状态压缩)
- FFT 快速傅里叶变换 初探
- linux c获取IP地址
- Cocos2d-x action动作整理集合
- 异步编程:When.js快速上手
- C/C++/Fortran混合编程浅谈------直接链接方式
- linux系统中python导入其他的目录下的文件
- AP算法java实现
- 利用freemarker 静态化网页
- #22 Generate Parentheses
- HDU 1180 诡异的楼梯
- strcpy()函数编译报错
- unity 序列化在IOS真机上抛出异常