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% ...
随机推荐
- Azure File
Azure File 服务使用标准 SMB 2.1 协议提供文件共享.Azure 中运行的应用程序现在可以使用熟悉的标准文件系统 API(如 ReadFile 和 WriteFile)在虚拟机之间轻松 ...
- MDX函数(官方顺序,带示例)
MDX函数(官方顺序) 1. AddCalculatedMembers (MDX) 返回通过将计算成员添加到指定集而生成的集. 语法: AddCalculatedMembers(Set_Expres ...
- 继续说一下2016里面的json功能(1)
首先先来测试数据,数据是使用之前的,就 不要在意这些细节了啊~ 借用上一篇的测试数据 ),Chinese int ,Math int) ,),(,),(,),(,null); 然后我们使用这个表里面生 ...
- dubbo-admin-2.5.3 运行报错: Bean property 'URIType' is not writable or has an invalid 解决方法
因为 jdk 是1.8的版本,和 dubbo-admin 存在兼容性问题.所以报错: Bean property 'URIType' is not writable or has an invalid ...
- 使用Spring MVC 实现 国际化
使用Spring MVC 实现 国际化 博客分类: Spring 1. 版本 Spring 3.1 2. 配置 LocaleResolver LocaleResolver 是指 ...
- HTTP协议小结
HTTP/0.9已过时.只接受GET一种请求方法,没有在通讯中指定版本号,且不支持请求头.由于该版本不支持POST方法,因此客户端无法向服务器传递太多信息. HTTP/1.0 这是第一个在通讯中指定版 ...
- linux centos6.5 ftp网页vsftpd配置
安装命令centos下 yum install vsftpd 出现“Complete!”时意味着安装完成.Linux中,系统对于大小写严格区分,比如abc和ABC是完全不相同的字符,要特别注意.配置V ...
- AngularJS几个基础概念
作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方.作用域是视图和作用域之间的胶水.在应用将视图渲染并呈现 ...
- ganglia安装简记
首先需要安装EPEL的源. yum install -y ganglia.x86_64 ganglia-gmetad.x86_64 ganglia-web.x86_64 ganglia-gmond.x ...
- ios移动端切图及前端规范
移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1. 设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...