1.含义
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。
async 本质上它就是 Generator 函数的语法糖。
语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西。
使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。
async函数对 Generator 函数的改进,体现在以下四点。
- 内置执行器(自动执行函数)
Generator 函数的自动执行必须靠执行器,而async
函数自带执行器。也就是说,async
函数的执行,与普通函数一模一样,只要一行,也不需要调用 yield 方法。
- 更好的语义
async和await,比起星号和yield,语义更清楚了。
async
表示函数里有异步操作
await
表示紧跟在后面的表达式需要等待结果。
- 更广的适用性
co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象
而async
函数的await
命令后面,可以是 Promise 对象和原始类型的值(但这时会自动转成立即 resolved 的 Promise 对象)。
- 返回值是 Promise
Generator 函数的返回值为 一个 Iterator 对象,而async函数的返回值是 Promise 对象(这更加方便了,你可以用then
方法指定下一步的操作。)
进一步说,async
函数完全可以看作多个异步操作(内部使用 await 命令来等待异步操作),包装成的一个 Promise 对象,而await
命令就是内部 then
命令的语法糖。
2.用法
- 返回值:
async
函数返回一个 Promise 对象 - 回调:可以使用
then
方法添加回调函数。 - await:当函数执行的时候,一旦遇到await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
一个异步操作的例子,指定多少毫秒后输出一个值。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(() => resolve(10), ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms).then(val => console.log(val)); //等待 timeout 函数执行完毕
console.log(value);
}
asyncPrint('hello world', 500);
// 10
// hello world
注意:是异步操作才会等待,同步操作不会影响其操作
3.async 函数有多种使用形式。
- 函数声明 :
async function (){ }
- 函数表达式:
const foo = async function ( ){ }
- 对象的方法:
let obj = { async foo() {} };
obj.foo().then(...)
- 箭头函数:
const foo = async () => {};
- Class 的方法:
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
4.语法
async函数的语法规则总体上比较简单,难点是错误处理机制。
4.1.返回 Promise 对象
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),
e => console.log(e)
)
// Error: 出错了
4.2.Promise 对象的状态变化
async
函数返回的 Promise 对象,必须等到内部所有await
命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return
语句或者抛出错误。
也就是说,只有async
函数内部的异步操作执行完(状态改变),才会执行then
方法指定的回调函数。
4.3.await 命令
正常情况下,await
命令后面是一个 Promise 对象,返回该对象的结果。
如果不是 Promise 对象,就无返回值(undefined)。
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
上面代码中,await
命令的参数是数值123,这时等同于return
123。(return
不可省去)
另一种情况是,await
命令后面是一个thenable
对象(即定义then
方法的对象),那么await
会将其等同于 Promise 对象。
JavaScript 一直没有休眠的语法,但是借助await
命令就可以让程序停顿指定的时间。下面给出了一个简化的sleep
实现。
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);// 延迟后执行,确定函数状态
})
}
// 用法
async function one2FiveInAsync() {
for(let i = 1; i <= 5; i++) {
console.log(i);
await sleep(1000);
}
}
one2FiveInAsync();//可自定义 then 方法
await
命令后面的 Promise 对象如果变为reject
状态,则reject
的参数会被catch
方法的回调函数接收到。
async function f() {
await Promise.reject('出错了');// Promise.reject可改变 Promise 的状态为 reject
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
上面代码中,await
语句前面没有return
,但是reject
方法的参数依然传入了catch
方法的回调函数。如果在await
前面加上return
,效果是一样的。
注意:
- 在 async 函数中,出现任何一个
await
语句后面的 Promise 对象变为reject
状态,那么整个async
函数都会中断执行,并且也会变成reject
状态。
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
有两种方法可以解决这种问题,使得即使前一个异步操作失败,也不会中断后面的异步操作。
- 第一种:那就是将第一个
await
放在try...catch
结构里面,这样不管这个异步操作是否成功,第二个await
都会执行。
就像下面这样
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world
- 另一种方法是
await
后面的 Promise 对象再跟一个catch
方法,处理前面可能出现的错误。
4.4.错误处理
如果await
后面的异步操作出错,那么等同于async
函数返回的 Promise 对象被reject
。
若是设置了catch
函数,则它的参数就是抛出的错误对象。
防止出错的方法,也是将其放在try...catch
代码块之中。
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} catch(e) {
//上面 await 抛出的错误会被这里的 catch 捕获,同时 async 函数的状态不会被此抛出的错误影响
}
return await('hello world'); //正常执行
}
如果有多个await
命令,可以统一放在try...catch
结构的 try
中。这样catch
可以同时监听他们的返回的错误
下面的例子使用try…catch结构,实现多次重复尝试。
const superagent = require('superagent');
const NUM_RETRIES = 3;
async function test() {
let i;
for (i = 0; i < NUM_RETRIES; ++i) {
try {
await superagent.get('http://google.com/this-throws-an-error');
break;
} catch(err) {}
}
console.log(i); // 3 。输出、循环结束
}
test();
上面代码中,如果await
操作成功,就会使用break
语句退出循环;如果失败,会被catch
语句捕捉,然后进入下一轮循环。
注意:
- 第一点,前面已经说过,
await
命令后面的Promise对象,运行结果可能是rejected
或运行途中报错,所以最好把await
命令放在try...catch
代码块中。 - 第二点,多个
await
命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
let foo = await getFoo();//先执行
let bar = await getBar();//后执行
//这样就是被写成了继发关系
上面代码中,getFoo
和getBar
是两个独立的异步操作(即互不依赖),被写成继发关系。完全可以让它们同时触发。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
上面两种写法,getFoo
和getBar
都是同时触发,这样就会缩短程序的执行时间。
- 第三点,
await
命令只能用在async
函数之中,如果用在普通函数,就会报错。 - 第四点,async 函数可以保留运行堆栈。
const a = () => {
b().then(() => c());
};
上面代码中,函数a内部运行了一个异步任务b()
。当b()
运行的时候,函数a()
不会中断,而是继续执行。等到b()
运行结束,可能a()
早就运行结束了,b()
所在的上下文环境已经消失了。如果b()
或c()
报错,错误堆栈将不包括a()
。简单来说就是这样运行函数有可能会丢失运行时的上下文环境。,所以错误堆栈不包括a()
现在将这个例子改成async函数。
const a = async () => {
await b();
c();
};
上面代码中,b()
运行的时候,a()
是暂停执行,上下文环境都保存着。一旦b()
或c()
报错,错误堆栈将包括a()。
5.async 函数的实现原理
async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function* () {
// ...
});
}
所有的async
函数都可以写成上面的第二种形式,其中的spawn
函数就是自动执行器。
下面给出spawn
函数的实现,基本就是前文自动执行器的翻版。
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
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); });
});
}
6.总结
async
本质上它就是 Generator 函数的语法糖,所以可以使用 Generator 函数的方法(then
,catch
等)async
函数表示异步操作内置执行器,语义更加清楚简洁。总是返回 Promise对象async
函数内部return
返回的值,会成为then
方法回调函数的参数。- 只有
async
函数内部的异步操作执行完(状态改变),才会执行then
方法指定的回调函数。 await
命令都会返回 Promise 对象 ,原始值会自动转化成 Promise