JavaScript 异步调用框架 (Part 4 - 链式调用)


Posted in Javascript onAugust 04, 2009

现实开发中,要按顺序执行一系列的同步异步操作又是很常见的。还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息。这就是多个需要顺序执行的异步请求。
为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅。
传统做法
大多数程序员都能够很好的理解顺序执行的代码,例如这样子的:

var firstResult = firstOperation(initialArgument); 
var secondResult = secondOperation(firstResult); 
var finalResult = thirdOperation(secondResult); 
alert(finalResult);

其中先执行的函数为后执行的函数提供所需的数据。然而使用我们的异步调用框架后,同样的逻辑必须变成这样子:
firstAsyncOperation(initialArgument).addCallback(function(firstResult) { 
secondAsyncOperation(firstResult).addCallback(function(secondResult) { 
thirdAsyncOperation(secondResult).addCallback(function(finalResult) { 
alert(finalResult); 
}); 
}); 
});

链式写法
我认为上面的代码实在是太不美观了,并且希望能够改造为jQuery风格的链式写法。为此,我们先构造一个用例:
Async.go(initialArgument) 
.next(firstAsyncOperation) 
.next(secondAsyncOperation) 
.next(thirdAsyncOperation) 
.next(function(finalResult) { alert(finalResult); })

在这个用例当中,我们在go传入初始化数据,然后每一个next后面传入一个数据处理函数,这些处理函数按顺序对数据进行处理。
同步并存
上面的用例调用到的全部都是异步函数,不过我们最好能够兼容同步函数,让使用者无需关心函数的具体实现,也能使用这项功能。为此我们再写一个这样的用例:
Async.go(0) 
.next(function(i) { alert(i); return i + 1; }) 
.next(function(i) { 
alert(i); 
var operation = new Async.Operation(); 
setTimeout(function() { operation.yield(i + 1); }, 1000); 
return operation; 
}) 
.next(function(i) { alert(i); return i + 1; }) 
.next(function(i) { alert(i); return i; });

在上述用例中,我们期待能够看到0, 1, 2, 3的提示信息序列,并且1和2之间间隔为1000毫秒。
异步本质
一个链式调用,本质上也是一个异步调用,所以它返回的也是一个Operation实例。这个实例自然也有result、state和completed这几个字段,并且当整个链式调用完成时,result等于最后一个调用返回的结果,而completed自然是等于true。
我们可以扩展一下上一个用例,得到如下用例代码:
var chainOperation = Async.go(0) 
.next(function(i) { alert(i); return i + 1; }) 
.next(function(i) { 
alert(i); 
var operation = new Async.Operation(); 
setTimeout(function() { operation.yield(i + 1); }, 1000); 
return operation; 
}) 
.next(function(i) { alert(i); return i + 1; }) 
.next(function(i) { alert(i); return i; }); 
setTiemout(function() { alert(chainOperation.result; }, 2000);

把链式调用的返回保存下来,在链式调用完成时,它的result应该与最后一个操作的返回一致。在上述用例中,也就是3。
调用时机
尽管我们提供了一种链式调用方式,但是用户不一定会按照这种固定的方式来调用,所以我们仍然要考虑兼容用户的各种可能用法,例如说异步地用next往调用链添加操作:
var chainOperation = Async.go(0); 
chainOperation.next(function(i) { alert(i); return i + 1; }); 
setTimeout(function() { 
chainOperation.next(function(i) { 
alert(i); 
var operation = new Async.Operation(); 
setTimeout(function() { operation.yield(i + 1); }, 2000); 
return operation; 
}) 
}, 1000); 
setTimeout(function() { 
chainOperation.next(function(i) { alert(i); return i + 1; }); 
}, 2000);

在这个用例当中,用户每隔1000毫秒添加一个操作,而其中第二个操作耗时2000毫秒。也就是说,添加第三个操作时第二个操作还没返回。作为一个健壮的框架,必须要能兼容这样的使用方式。
此外我们还要考虑,用户可能想要先构造调用链,然后再执行调用链。这时候用户就会先使用next方法添加操作,再使用go方法执行。
var chainOperation = Async 
.chain(function(i) { alert(i); return i + 1; }) 
.next(function(i) { 
alert(i); 
var operation = new Async.Operation(); 
setTimeout(function() { operation.yield(i + 1); }, 2000); 
return operation; 
}) 
.go(0) 
setTimeout(function() { 
chainOperation.next(function(i) { alert(i); return i + 1; }) 
}, 1000);

在上述用例中,用户通过chain和next添加了头同步操作和异步操作各一个,然后用go执行调用链,在调用链执行完毕之前又用next异步追加了一个操作。一个健壮的框架,在这样的用例当中应该能够如同用户所期望的那样提示0, 1, 2。
小结
针对链式调用的需求,我们设计了如此多的用例,包括各种奇怪的异步调用方式。最终如何实现这样的功能呢?
Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 #Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 #Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 #Javascript
jQuery 相关控件的事件操作分解
Aug 03 #Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 #Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 #Javascript
一句话JavaScript表单验证代码
Aug 02 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
教你php如何实现验证码
2016/01/20 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
程序员岗位职责
2013/11/11 职场文书
运动会广播稿500字
2014/01/28 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
十月围城观后感
2015/06/08 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS