写在前面
有一个有趣的问题:
为什么
Node.js
约定回调函数的第一个参数必须是错误对象err
(如果没有错误,该参数就是null
)?
原因是执行回调函数对应的异步操作,它的执行分成两段,这两段之间抛出的错误程序无法捕获,所以只能作为参数传入第二段。大家知道,JavaScript
只有一个线程,如果没有异步编辑,复杂的程序基本没法使用。在ES6诞生以前,异步编程的方式大概有下面四种:
回调函数
事件监听
发布/订阅
Promise
对象
ES6将JavaScript
异步编程带入了一个全新的阶段,ES7中的async
函数更是给出了异步编程的终极解决方案。下面将具体讲解异步编程的原理和值得注意的地方,待我细细道来~
异步编程的演变
基本理解
所谓异步
,简单地说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好准备再回过头执行第二段。
举个例子
读取一个文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。
相应地,连续的执行就叫作同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。
回调函数
所谓回调函数,就是把任务的第二段单独写在一个函数中,等到重新执行该任务时直接调用这个函数。其英文名字 callback
直译过来就是 "重新调用"的意思。
拿上面的例子讲,读取文件操作是这样的:
fs.readFile(fileA, (err, data) => {
if (err) throw err;
console.log(data)
})
fs.readFile(fileB, (err, data) => {
if (err) throw err;
console.log(data)
})
注意:上面两段代码彼此是异步的,虽然开始执行的顺序是从上到下,但是第二段并不会等到第一段结束才执行,而是并发执行。
那么问题来了,如果想fileB
等到fileA
读取成功后再开始执行应该怎么处理呢?最简单的办法是通过 回调嵌套:
fs.readFile(fileA, (err, data) => {
if (err) throw err;
console.log(data)
fs.readFile(fileB, (_err, _data) => {
if (_err) throw err;
console.log(_data)
})
})
这种方式我只能容忍个位数字的嵌套,而且它使得代码横向发展,实在是丑的一笔,次数多了根本是没法看。试想万一要同步执行100个异步操作呢?疯掉算了吧!有没有更好的办法呢?
使用Promise
要澄清一点,Promise
的概念并不是ES6
新出的,而是ES6
整合了一套新的写法。同样继续上面的例子,使用Promise
代码就变成这样了:
var readFile = require('fs-readfile-promise');
readFile(fileA)
.then((data)=>{console.log(data)})
.then(()=>{return readFile(fileB)})
.then((data)=>{console.log(data)})
// ... 读取n次
.catch((err)=>{console.log(err)})
注意:上面代码使用了
Node
封装好的Promise
版本的readFile
函数,它的原理其实就是返回一个Promise
对象,咱也简单地写一个:
var fs = require('fs');
var readFile = function(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
module.export = readFile
但是,
Promise
的写法只是回调函数的改进,使用then()
之后,异步任务的两段执行看得更清楚,除此之外并无新意。撇开优点,Promise
的最大问题就是代码冗余,原来的任务被Promise
包装一下,不管什么操作,一眼看上去都是一堆then()
,原本的语意变得很不清楚。
把酒问苍天,MD还有更好的办法吗?
使用Generator
在引入generator
之前,先介绍一下什么叫 协程
"携程在手,说走就走"。哈哈,别混淆了, "协程" 非 "携程"
协程
所谓 "协程" ,就是多个线程相互协作,完成异步任务。协程有点像函数,又有点像线程。其运行流程大致如下:
第一步: 协程A开始执行
第二步:协程A执行到一半,暂停,执行权转移到协程B
第三步:一段时间后,协程B交还执行权
第四步:协程A恢复执行
function asyncJob() {
// ... 其他代码
var f = yield readFile(fileA);
// ... 其他代码
}
上面的
asyncJob()
就是一个协程,它的奥妙就在于其中的yield
命令。它表示执行到此处执行权交给其他协程,换而言之,yield
就是异步两个阶段的分界线。
协程遇到yield
命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点就是代码的写法非常像同步操作,如果除去 yield
命令,简直一模一样。
Generator
函数
Generator
函数是协程在ES6中的实现,最大的特点就是可以交出函数的执行权(即暂停执行)。整个Generator
函数就是一个封装的异步任务,或者说就是异步任务的容器。
function* gen(x) {
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
上面的代码中,调用Generator
函数,会返回一个内部指针(即遍历器)g,这是Generator
函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next()
方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield
语句。
换而言之,next()
方法的作用是分阶段执行Generator
函数。每次调用next()
方法,会返回一个对象,表示当前阶段的信息(value
属性和done
属性)。value
属性是yield
语句后面表达式的值,表示当前阶段的值;done
属性是一个布尔值,表示Generator
函数是否执行完毕,即是否还有一个阶段。
Generator
函数的数据交换和错误处理
Generator
函数可以暂停执行和恢复执行,这是它封装异步任务的根本原因。除此之外,它还有两个特性,使它可以作为异步编程的解决方案:函数体内外的数据交换和错误处理机制。
next()
方法返回值的value
属性,是Generator
函数向外输出的数据;next()
方法还可以接受参数,向Generator
函数体内输入数据。
function* gen(x) {
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }
上面的代码中,第一个
next()
方法的value
属性,返回表达式x+2
的值(3)。第二个next()
方法带有参数2,这个参数可以传入Generator
函数,作为上个阶段异步任务的返回结果,被函数体内的变量y接收,因此这一步的value
属性返回的就是2(变量y的值)。
Generator
函数内部还可以部署错误处理代码,捕获函数体外抛出的错误。
function* gen(x) {
try {
var y = yield x + 2
} catch(e) {
console.log(e)
}
return y
}
var g = gen(1);
g.next();
g.throw('出错了');
上面代码的最后一行,Generator
函数体外,使用指针对象的throw
方法抛出的错误,可以被函数体内的try...catch
代码块捕获。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。
异步任务的封装
下面看看如何使用Generator
函数,执行一个真实的异步任务。
var fetch = require('node-fetch')
function* gen() {
var url = 'https://api.github.com/usrs/github';
var result = yield fetch(url);
console.log(result.bio);
}
上面代码中,
Generator
函数封装了一个异步操作,该操作先读取一个远程接口,然后从JSON
格式的数据解析信息。就像前面说过的,这段代码非常像同步操作。除了加上yield
命令。
执行这段代码的方法如下:
var g = gen();
var result = g.next();
result.value.then(function(data) {
return data.json()
}).then(function(data) {
g.next(data)
});
上面代码中,首先执行Generator
函数,获取遍历器对象。然后使用next()
方法,执行异步任务的第一阶段。由于Fetch
模块返回的是一个Promise
对象,因此需要用then()
方法调用下一个next()
方法。
可以看到,虽然Generator
函数将异步操作表示得很简洁,但是流程管理却不方便(即合适执行第一阶段,何时执行第二阶段)
大Boss登场之 async
函数
所谓async
函数,其实是Generator
函数的语法糖。
继续我们异步读取文件的例子,使用Generator
实现
var fs = require('fs');
var readFile = (path) => {
return new Promise((resolve, reject) => {
fs.readFile(path, (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
var gen = function* () {
var f1 = yield readFile(fileA);
var f2 = yield readFile(fileB);
console.log(f1.toString());
console.log(f2.toString());
}
写成async
函数,就是下面这样:
var asyncReadFile = async function() {
var f1 = await readFile(fileA);
var f2 = await readFile(fileB);
console.log(f1.toString())
console.log(f2.toString())
}
发现了吧,async
函数就是将Generator
函数的*
替换成了async
,将yield
替换成await
,除此之外,还对 Generator
做了以下四点改进:
(1)内置执行器。Generator
函数的执行比如靠执行器,所以才有了co
模块等异步执行器,而async
函数是自带执行器的。也就是说:async
函数的执行,与普通函数一模一样,只要一行:
var result = asyncReadFile();
(2)上面的代码调用了asyncReadFile()
,就会自动执行,输出最后结果。这完全不像Generator
函数,需要调用next()
方法,或者使用co
模块,才能得到真正执行,从而得到最终结果。
(3)更好的语义。async
和await
比起星号和yield
,语义更清楚。async
表示函数里有异步操作,await
表示紧跟在后面的表达式需要等待结果。
(4)更广的适用性。async
函数的await
命令后面可以是Promise
对象和原始类型的值(数值、字符串和布尔值,而这是等同于同步操作)。
(5)返回值是Promise
,这比Generator
函数返回的是Iterator
对象方便多了。你可以用then()
指定下一步操作。
进一步说,
async
函数完全可以看作由多个异步操作包装成的一个Promise
对象,而await
命令就是内部then()
命令的语法糖。
实现原理
async
函数的实现就是将Generator
函数和自动执行器包装在一个函数中。如下代码:
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function*() {
// ...
})
}
// 自动执行器
function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF()
} catch(e) {
return reject(e)
}
if (next.done) {
return resolve(next.value)
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v) })
},function(e) {
step(function() { return gen.throw(e) })
})
}
step(function() { return gen.next(undefined) })
})
}
async
函数用法
(1)async
函数返回一个Promise
对象,可以是then()
方法添加回调函数。
(2)当函数执行时,一旦遇到await()
就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
下面是一个延迟输出结果的例子:
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
async function asyncPrint(value, ms) {
await timeout(ms)
console.log(value)
}
// 延迟500ms后输出 "Hello World!"
asyncPrint('Hello World!', 500)
注意事项
(1)await
命令后面的Promise
对象,运行结果可能是reject
,所以最好把await
命令放在try...catch
代码块中。
(2)await
命令只能用在async
函数中,用在普通函数中会报错。
(3)ES6
将await
增加为保留字。如果使用这个词作为标识符,在ES5
中是合法的,但是ES6
会抛出 SyntaxError
(语法错误)。
终极一战
"倚天不出谁与争锋",上面介绍了一大堆,最后还是让我们通过一个例子来看看 async
函数和Promise
、Generator
到底谁才是真正的老大吧!
需求:假定某个DOM元素上部署了一系列的动画,前一个动画结束才能开始后一个。如果当中又一个动画出错就不再往下执行,返回上一个成功执行动画的返回值。
用Promise
实现
function chainAnimationsPromise(ele, animations) {
// 变量ret用来保存上一个动画的返回值
var ret = null;
// 新建一个空的Promise
var p = Promise.resolve();
// 使用then方法添加所有动画
for (var anim in animations) {
p = p.then(function(val) {
ret = val;
return anim(ele);
})
}
// 返回一个部署了错误捕获机制的Promise
return p.catch(function(e) {
/* 忽略错误,继续执行 */
}).then(function() {
return ret;
})
}
虽然Promise
的写法比起回调函数的写法有很大的改进,但是操作本身的语义却变得不太明朗。
用Generator
实现
function chainAnimationsGenerator(ele, animations) {
return spawn(function*() {
var ret = null;
try {
for(var anim of animations) {
ret = yield anim(ele)
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
})
}
使用Generator
虽然语义比Promise
写法清晰不少,但是用户定义的操作全部出现在spawn
函数的内部。这个写法的问题在于,必须有一个任务运行器自动执行Generator
函数,它返回一个Promise
对象,而且保证yield
语句后的表达式返回的是一个Promise
。上面的spawn
就扮演了这一角色。它的实现如下:
function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF()
} catch(e) {
return reject(e)
}
if (next.done) {
return resolve(next.value)
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v) })
},function(e) {
step(function() { return gen.throw(e) })
})
}
step(function() { return gen.next(undefined) })
})
}
使用async
实现
async function chainAnimationAsync(ele, animations) {
var ret = null;
try {
for(var anim of animations) {
ret = await anim(ele)
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
}
好了,光从代码量上就看出优势了吧!简洁又符合语义,几乎没有不相关代码。完胜!
注意一点:
async
属于ES7的提案,使用时请通过babel
或者regenerator
进行转码。
参考
阮一峰 《ES6标准入门》
@欢迎关注我的 github 和 个人博客 -Jafeney
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。