javascript学习指南之回调问题

回调地狱

对 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 异步编程发展的脉络。