async
函数就是Generator函数的语法糖。
var fs = require('fs'); var readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) reject(error);
resolve(data);
});
});
}; // Generator 函数
var gen = function* (){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
}; // async 函数
var asyncReadFile = async function (){
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
async
函数就是将Generator函数的星号(*
)替换成async
,将yield
替换成await
,仅此而已。
async
函数对 Generator 函数的改进,体现在以下四点。
(1)内置执行器。Generator函数的执行必须靠执行器,所以才有了co
模块,而async
函数自带执行器。也就是说,async
函数的执行,与普通函数一模一样,只要一行。
var result = asyncReadFile();
上面的代码调用了asyncReadFile
函数,然后它就会自动执行,输出最后结果。这完全不像Generator函数,需要调用next
方法,或者用co
模块,才能得到真正执行,得到最后结果。
(2)更好的语义。async
和await
,比起星号和yield
,语义更清楚了。async
表示函数里有异步操作,await
表示紧跟在后面的表达式需要等待结果。
(3)更广的适用性。 co
模块约定,yield
命令后面只能是Thunk函数或Promise对象,而async
函数的await
命令后面,可以是Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
(4)返回值是Promise。async
函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用then
方法指定下一步的操作。
语法:
(1)async
函数返回一个Promise对象。
async
函数内部return
语句返回的值,会成为then
方法回调函数的参数。
async function f() {
return 'hello world';
} f().then(v => console.log(v))
// "hello world"
async
函数内部抛出错误,会导致返回的Promise对象变为reject
状态。抛出的错误对象会被catch
方法回调函数接收到。
async function f() {
throw new Error('出错了');
} f().then(
v => console.log(v)
).catch(
e => console.log(e)
);
// Error: 出错了
(2)async
函数返回的Promise对象,必须等到内部所有await
命令的Promise对象执行完,才会发生状态改变。也就是说,只有async
函数内部的异步操作执行完,才会执行then
方法指定的回调函数。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"
(3)正常情况下,await
命令后面是一个Promise对象。如果不是,会被转成一个立即resolve
的Promise对象。
async function f() {
return await 123;
} f().then(v => console.log(v))
//
(4)如果await
后面的异步操作出错,那么等同于async
函数返回的Promise对象被reject
。
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error:出错了
try...catch... 的使用:
async function f() {
await Promise.reject('出错了');
} f()
.then(v => console.log(v)) // 当 await 后面的 Promise 状态变成了 reject,会直接执行 catch,而这里的 then 执行不到
.catch(e => console.log(e))
// 出错了
为了解决上述问题,加入 try...catch...
async function f() {
try {
await Promise.reject('出错了'); // await 的 Promise 被 reject,进入内部 catch
} catch(e) {
}
return await Promise.resolve('hello world');
} f()
.then(v => console.log(v))
// hello world
注意点 :
第一点,await
命令后面的Promise
对象,运行结果可能是rejected
,所以最好把await
命令放在try...catch
代码块中。
第二点,多个await
命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
第三点,await
命令只能用在async
函数之中,如果用在普通函数,就会报错。