Javascript异步编程之二回调函数

上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些，这节主要举几个例子来具体化一下。在开始之前，首先要明白一件事，在javascript里函数可以作为参数进行传递，这里涉及到高阶函数的概念，大家可以自行google一下。

传统的同步函数需要返回一个结果的话都是通过return语句实现，例如：

function foo() {
     var a = 3,
          b = 2;
     return a+b;
}

var c = foo();
console.log(c); //5

就是说后面的代码console.log要得到函数foo的运行结果只要调用该函数就可以得到它所返回的值a+b。

但是如果foo是一个异步函数，可以这样做吗？

异步函数的定义：

首先说一下javascript里面怎样书写异步函数。基本的方法就是，在你的函数定义里面调用别人已经提供的异步api （不管是原生的还是第三方的），你的函数也就是个异步函数了：

function foo(callback) {
     你自己的代码;
     asyncFn(function() {
          var result = 你自己的代码;
          callback(result);
     });
}

上面这个例子中，你要定义一个函数foo，里面调用了一个异步函数asyncFn，在asyncFn运行完了之后调用foo的回调函数callback，来对结果result进行处理。

上面是一般异步函数的定义格式。setTimeout是javascript里面经常用的异步api。做试验的时候经常用它来模拟异步操作，下面的例子模拟一个操作要运行1秒后才返回结果（当然你可以设0秒，但仍然是异步的）:

function foo(callback) {
     你自己的代码;
     setTimeout(function() {
          var result = 你自己的代码;
          callback(result);
     }, 1000);
}

在node.js里面提供了其他的api来起到类似的作用（把你的同步代码写成异步函数），setImmediate或者process.nextTick，其作用就是异步调用你的代码。这两个基本上用法类似，但特定情况下是不同的，可以上网自行查找setImmediate，setTimeout(fn, 0)和process.nextTick 的区别，一般在不了解的情况下，建议使用setImmediate.

function foo(callback) {
     你自己的代码;
     setImmediate(function() {
          var result = 你自己的代码;
          callback(result);
     });
}
 
function foo(callback) {
     你自己的代码;
     process.nextTick(function() {
          var result = 你自己的代码;
          callback(result);
     });
}

异步函数的调用：

以上是异步函数的定义，下面讲一下异步函数是怎样调用的。在调用异步函数的时候，回调函数有两种写法，一是直接写个匿名回调函数，下面例子中function(data) {...} 就是匿名回掉函数：

foo(function(data) {
     你的代码来使用传回来的data;
});

二是先定义一个函数，然后使用函数引用作为回调：

function bar(data) {
     你的代码来使用传回来的data;
}

foo(bar);

现在回到开篇的问题，有同学一定看明白了，为什么异步函数不能用return来返回值。下面把两种写法放一起，方便比较：

正确写法：

function foo(callback) {
     你自己的代码;
     asyncFn(function() {
          var result = 你自己的代码;
          callback(result);
     });
}

错误写法：

function bar() {
     你自己的代码;
     asyncFn(function() {
          var result = 你自己的代码;
     });
     
     return result;
}

在错误写法中，bar企图使用return来返回result。在上一篇已经讲过，异步api不会等执行完了再往下执行，也就是说asyncFn在调用后马上会往下执行return result这句，这时候asyncFn还在异步执行当中，result根本还没有计算出来，所以不能return期望结果。当然对javascript语法比较熟的同学也清楚，函数外部不能访问函数内部变量，就是说在asyncFn函数的外部是无法访问到result这个变量的，不管那个是主要原因，哪个是次要，异步api是肯定不能用return来返回值。

以上就是基本的异步函数的定义和调用。

异步函数实例：

任何只讲理论不讲应用的教程都是耍流氓。。。好吧，举个实际的例子：

网络请求是node.js异步API中常用的一种，能够进行网络请求的node.js原生和第三方的api非常多，下面以superagent为例来演示一下(运行之前先用npm安装superagent):

var agent = require('superagent');

agent.get('http://www.baidu.com')
     .end(function(err, res) {
          if(err) {
               console.log(err);
          } else {
               console.log('http status: ' + res.status);
               console.log(res.header);
          }
     });

上面代码是可以直接运行的。这个例子中agent.get(url).end(callback)是一个异步api调用，在回调函数里面定义自己的代码。回掉函数传回来两个数据，err和res。如果不出问题的话res对象是完整的http响应的内容，如果出错的话出错信息会保存在err对象中。

这里为了演示只是在控制台打印传回来的res的status和header （注：superagent是个很不错的http客户端，可以去github了解其提供的具体功能）。

顺带提一下：异步函数不能像同步代码一样用try...catch捕获异常，所以这里有一个约定俗成，就是回掉函数一般需要有两个参数，上面superagent的例子中就是err和res，一般第一个参数是error，当异步代码发生异常的时候用这个参数返回异常详细信息，第二个参数才是返回的有用数据，当没有异常的时候用它来返回，即superagent的例子中的res，返回的是http响应内容。

异步嵌套：

在同步代码中，如果有三个函数顺序执行，前一个的输出作为后一个的输入，只要按顺序执行三个函数即可。但在异步代码中，要做到这个就有点麻烦了。具体的原因就是因为不能像同步函数一样用return来返回值，而必须用回掉函数。所以，第二个函数要在第一个函数的回调中调用，同样第三个函数要在第二个函数的回调中调用，这就是所谓的回调嵌套。下面的例子是要先从a.txt读取其内容，然后从b.txt读取其内容，最后把两个内容合并写入ab.txt，完了后控制台打印：read and write done!

var fs = require('fs');

fs.readFile('./a.txt', function(err1, data1) {
     fs.readFile('./b.txt', function(err2, data2) {
          fs.writeFile('./ab.txt', data1 + data2, function(err) {
               console.log('read and write done!');
          });
     });
});

三个异步函数嵌套看起来挺简单的。设想一下，如果有5个，10个甚至更多的异步函数要顺序执行，那要嵌套多少层呢？（大家都不喜欢身材横着长吧哈哈）说实话相当恐怖，代码会变得异常难读，难调试，难维护。这就是所谓的回调地狱或者callback hell。正是为了解决这个问题，才有了后面两节要讲的内容，用promise或generator进行异步流程管理。异步流程管理说白了就是为了解决回调地狱的问题。所以说任何事情都有两面性，异步编程有它独特的优势，却也同时遇到了同步编程根本不会有的代码组织难题。

思考题：

自己写异步函数还有一种经常遇到的情况，就是在循环中，比如for循环中不断调用异步函数asyncFn，因为每次循环调用asyncFn你都不知道它会运行到什么时候，这种情况下你的foo函数什么时候调用回掉函数来返回最终结果? 大家可以用读写文件来试验，使用fs.readFile这个函数来循环读取某个目录下面所有的文件内容，最后用fs.writeFile合并写到一个新的文件里面。答案下回分解 :)

function foo(arr, callback) {
     for(var i=0; i<arr.length; ++i) {
          asyncFn(function() {
               你的代码;
          })
     }
}

上一篇： Javascript异步编程之一异步原理

转载请标明出处： http://www.cnblogs.com/chrischjh/p/4667713.html

posted @ 2015-07-22 16:38 loop4ever 阅读(10418) 评论(0) 编辑收藏举报

刷新页面返回顶部

Javascript异步编程之二回调函数

公告