javascript学习指南之回调问题


Posted in Javascript onApril 23, 2016

回调地狱

对 JavaScript 程序员来说,处理回调是家常,但是处理层次过深的回调就没有那么美好了,下面的示例代码片段用了三层回调,再补脑一下更多层的场景,简直是酸爽,这就是传说中的回调地狱。

getDirectories(function(dirs) {
  getFiles(dirs[0], function(files) {
    getContent(files[0], function(file, content) {
      console.log('filename:', file);
      console.log(content);
    });
  });
});
 
function getDirectories(callback) {
 setTimeout(function() {
  callback(['/home/ben']);
 }, 1000);
}
 
function getFiles(dir, callback) {
  setTimeout(function() {
    callback([dir + '/test1.txt', dir + '/test2.txt']);
  }, 1000)
}
 
function getContent(file, callback) {
  setTimeout(function() {
    callback(file, 'content');
  }, 1000)
}

解决方案

生态圈中有很多异步解决方案可以处理回调地狱的问题,比如 bluebird、Q 等,本文重点介绍 ECMAScript 6/7 规范中对异步编程的支持。

ES6 Promise

Promise 是一种异步编程的解决方案,是解决回调地狱问题的利器。

Promise 在 JavaScript 生态圈被主流接受是在 2007 年 Dojo 框架增加了 dojo.Deferred 的功能。随着 dojo.Deferred 的流行,在 2009 年 Kris Zyp 提出了 CommonJS Promises/A 规范。随后生态圈中出现了大量 Promise 实现包括 Q.js、FuturesJS 等。当然 Promise 之所有这么流行很大程度上是由于 jQuery 的存在,只是 jQuery 并不完全遵守 CommonJS Promises/A 规范。随后正如大家看到的,ES 6 规范包含了 Promise。
MDN 中对 Promise 是这样描述的:

Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的
以下的代码是「回调地狱」一节中的示例通过 Promise 实现,看上去代码也不是很简洁,但是比起传统的层级回调有明显改善,代码可维护性和可读性更强。

getDirectories().then(function(dirs) {
  return getFiles(dirs[0]);
}).then(function(files) {
  return getContent(files[0]);
}).then(function(val) {
  console.log('filename:', val.file);
  console.log(val.content);
});
 
function getDirectories() {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
    resolve(['/home/ben']);
   }, 1000);
  });
}
 
function getFiles(dir) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve([dir + '/test1.txt', dir + '/test2.txt']);
    }, 1000);
  });
}
 
function getContent(file) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve({file: file, content: 'content'});
    }, 1000);
  });
}

ES6 Generator

Promise 的实现方式还不够简洁,我们还需要更好的选择,co 就是选择之一。co 是基于 Generator(生成器)的异步流控制器,了解 co 之前首先需要理解 Generator。熟悉 C# 的同学应该都有了解,C# 2.0 的版本就引入了 yield 关键字,用于迭代生成器。ES 6 Generator 跟 C# 相似,也使用了 yield 语法糖,内部实现了状态机。具体用法可以参考 MDN 的文档 function* 一节,原理可以参考AlloyTeam 团队 Blog 深入理解 Generator。使用 co 巧妙结合 ES6 Generator 和 ES6 Promise 让异步调用更加和谐。

co(function* (){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
});

co 非常巧妙,其核心代码可以简化如下的示例,大体思路是采用递归遍历生成器直到状态完成,当然 co 做的跟多。

runGenerator();
 
function* run(){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}
 
function runGenerator(){
  var gen = run();
 
  function go(result){
    if(result.done) return;
    result.value.then(function(r){
      go(gen.next(r));
    });
  }
 
  go(gen.next());
}

ES7 Async/Await

ES6 Generator 确实很好,只可惜需要第三方库的支持。好消息是 ES 7 会引入 Async/Await 关键字完美解决异步调用的问题。好吧,.net 又领先了一步,.net framework 4.5 已经率先支持了。
今后的代码写起来是这样:

run();
async function run() {
  var dirs = await getDirectories();
  var files = await getFiles(dirs[0]);
  var contentVal = await getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}

结论

从经典的回调的异步编程方式,到 ES6 Promise 规范对异步编程的改善,再到 co 结合 ES Generator 优雅处理,最后 ES7 async/await 完美收官,可以让我们了解为什么 ECMAScript 会出现这些特性以及解决了什么问题,更加清晰地看到 JavaScript 异步编程发展的脉络。

Javascript 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
七个很有意思的PHP函数
May 12 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
探寻JavaScript中this指针指向
Apr 23 #Javascript
javascript中this指向详解
Apr 23 #Javascript
JavaScript实现Base64编码转换
Apr 23 #Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 #Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 #Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 #Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 #Javascript
You might like
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
ES6的新特性概览
2016/03/10 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
jQuery手风琴的简单制作
2017/05/12 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python常用断言函数实例汇总
2020/11/30 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
办理信用卡工作证明
2014/01/11 职场文书
平面设计求职信
2014/03/10 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
个人年终总结范文
2015/03/09 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
建国大业观后感600字
2015/06/01 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python