JS多异步之间的协作方案
场景:使用工具函数downloadAllAsync接收一个URL数组并下载所有文件,结果返回一个存储了文件内容的数组,每个URL对应一个字符串。
好处:downloadAllAsync并不只有清理嵌套回调函数的好处,其主要好处是并行下载文件。我们可以在同一个事件循环中一次启动所有文件的下载,而不用等待每个文件完成下载。
并行逻辑是微妙的,很容易出错。下面的实现有一个隐蔽的缺陷。
function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
len = urls.length;
if(len === 0) { // 如果请求路径为空, 不执行下面的程序
// 绝不要同步地调用异步的回调函数
setTimeout(onsuccess.bind(null, result), 0);
return;
}
urls.forEach(function(url) {
downloadAsync(url, function(r) {
if(result) {
result.push(r); // race condition
// 根据提供的url, 所有文件数据被成功下载后,执行onsuccess程序
result.length === len && onsuccess(result);
}
}, function(e) {
if (result) {
result = null; // 在错误的情况下, 确保onerror只执行一次
onerror(e);
}
})
})
}
如果有多个下载失败,我们设置了result数组为null,从而保证onerror只被调用一次。即在第一次错误发生时。
downloadAllAsync函数实现的是一旦下载完成就立即将中间结果保存在result数组的末尾。因此,陷阱是保存下载文件内容的数组的顺序是未知的。几乎不能正确使用这样的API,因为调用者无法找出哪个结果对应哪个文件。
疑问:为什么使用setTimeout函数来调用onsuccess回调函数,而不是直接调用它
我们将请求的中间结果存储在原始的索引位置来达到预期结果
function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
len = urls.length;
if(len === 0) {
setTimeout(onsuccess.bind(null, result), 0);
return;
}
urls.forEach(function(url, index) {
downloadAsync(url, function(r) {
if(result) {
result[index] = r; // store at fixed index
result.length === len && onsuccess(result); // race condition
}
}, function(e) {
if (result) {
result = null;
onerror(e);
}
})
})
}
该实现利用了foreach回到函数的第二个参数。该参数为当前迭代提供的数组索引。不幸的是,这仍然不正确。
数组更新契约,即设置一个索引属性,总是确保数组的length属性大于索引。
正确的实现应用了一个计数器来追踪正在进行的操作数量。
function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
pending = urls.length;
if(pending === 0) {
setTimeout(onsuccess.bind(null, result), 0);
return;
}
urls.forEach(function(url, index) {
downloadAsync(url, function(r) {
if(result) {
result[index] = r; // store at fixed index
// pending -= 1; // register the success
// pending === 0 && onsuccess(result); // race condition
--padding || onsuccess(result);
}
}, function(e) {
if (result) {
result = null;
onerror(e);
}
})
})
}
现在整个世界都太平了,不论事情以什么样的顺序发生,pending计数器都能准确地指出何时所有的事件会被完成,并以预期的顺序返回完整的结果。
参考:编写高质量JS代码68个有效方法
更新: 2014/05/14
一般而言,事件与侦听器关系是一对多,但在异步编程中,也会出现事件与侦听器的关系是多对一的情况,话句话说,一个业务逻辑可能依赖多个回调或事件传递的结果。例如,在网页渲染的过程中,通常需要数据、模板、资源文件,这三者互相之间并不依赖,但最终渲染结果中三者缺一不可。如果采用默认的异步方法调用,程序也许将会如下所示:
fs.readFile(template_path, 'utf8', function(err, template) {
db.query(sql, function(err, data) {
l10n.get(function(err, resourse) {
// TODO
});
});
});
这在结果的保证上是没有问题的,问题在于这并没有利用好异步I/O带来的并发优势。这是异步编程的典型问题,为了实现最终结果的处理而导致可以并行调用但实际只能串行执行。
var count = 0;
var result = {}; // 存放查询结果
var done = function(key, value) {
result[key] = value;
count++;
count === 3 && render(result);
};
fs.readFile(template_path, 'utf8', function(err, template) {
done('template', template);
});
db.query(sql, function(err, data) {
done('data', data);
});
l10n.get(function(err, resourse) {
done('resourse', resourse);
});
JS多异步之间的协作方案的更多相关文章
- Node.js 和 Python之间如何进行选择?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/nodejs-vs-python-which ...
- js构建ui的统一异常处理方案(一)
从早期从事基于java的服务器端开发,再到之后从事基于web和js的ui开发,总体感觉基于web页面的ui开发远不如服务器端健壮.主要是早期ie浏览器功能太弱小,很多业务被迫放到服务器端去实现,浏览器 ...
- js的异步和单线程
最近,同事之间做技术分享的时候提到了一个问题"js的异步是另开一个线程吗?"当时为此争论不休.会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教, ...
- 探秘JS的异步单线程
对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...
- JS的异步模式
JS的异步模式:1.回调函数:2.事件监听:3.观察者模式:4.promise对象 JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous) ...
- Node.js之异步编程
> 文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 
上一篇文章,我分析了同步代码做异常处理是基于责任链模式,而通过try.catch等语句可以很容易地实现这种责任链模式.但是如果是异步调用,我们无法直接通过try.catch语句实现责任链模式,并且通过 ...
- Quick-Cocos2d-x v3.3 异步加载Spine方案 转
Quick-Cocos2d-x v3.3 异步加载Spine方案 浩月难求也与2015-03-25 15:06:3441 次阅读 背景 项目中使用了Quick-Cocos2d-x 3.3,由于Spin ...
- 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制
转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...
随机推荐
- 豆瓣FM 歌词跟随插件
一直在用豆瓣FM,发现老是没有歌词很不方便,今天找了下.找到一个不错的插件. 插件原文地址:http://www.douban.com/group/topic/47559280/ 插件下载地址:htt ...
- 1.2 《硬啃设计模式》 第2章 学习设计模式需掌握的UML知识
要看懂设计模式,你需要懂类图(Class Diagram),也需要懂一点对象图(Object Diagram),下面介绍一些UML的必要知识,以便你学习设计模式. 属性.操作 下图简单介绍类的属性和操 ...
- HashSet、LinkedHashSet、TreeSet
以下内容基于jdk1.7.0_79源码: 关于HashSet.LinkedHashSet.TreeSet Set接口的实现类,最大特点是不允许出现重复元素: HashSet:基于HashMap实现,一 ...
- TY创新D总个人经历谈
这是深圳一个公司的老板(就叫D总吧)在吃饭间和我们讲起的他的个人经历,这中间个人的苦辣酸甜,有些意思,值得玩味,就做了个实录. D总:我当时做餐饮是在我第一次创业失败之后.我做的是一家火锅店. 这家餐 ...
- U-BLOX GPS 模块及GPRMC指令解析
受朋友所托,调试一款GPS模块,该模块是UBLOX的NEO-6M GPS模组.想到用这款GPS的人较多,自己日后也有可能在用到这个模块,就写下这份笔记. 1. 介绍 基本信息如下: 1, 模块采用U- ...
- 十五天精通WCF——第五天 你需要了解的三个小技巧
一: 服务是端点的集合 当你在开发wcf的时候,你或许已经注意到了一个service可以公布多个endpoint,确实是这样,在wcf中有一句很经典的话,叫做“服务是端点的集合",就 比如说 ...
- 使用C/C++,赋值运算时发生的转换
使用C/C++,赋值运算时发生的转换主要有以下四种情况 一: 两边类型不同: 结果: 自动完成类型转换! 二: 长数赋给短数: 结果: 截取长数的低位送给短数! 三: 短数赋给长数: 结果: 原来是什 ...
- ASP.NET 跨域
#region 支持跨域请求 //Response.ClearHeaders(); string origin = Request.Headers["Origin"]; Respo ...
- Python使用QRCode模块生成二维码
QRCode官网https://pypi.python.org/pypi/qrcode/5.1 简介python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode ...
- height:100%不起作用(无效),div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...