什么是Async、await
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async顾名思义是“异步”的意思,用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。
基本用法
async函数的返回值
既然async函数是声明一个异步函数,那么我们如何知道这个函数是否执行完成呢。我们观察一下async函数的返回值就明白了。
async function lxcAsync() {
return "LXC";
}
console.log(lxcAsync()); // Promise { 'LXC' }
代码输出的结果是Promise { 'LXC' },可见async函数返回的是一个Promise对象,因此我们可以使用then方法添加回调函数,从而处理async函数返回的结果。
async function lxcAsync() {
return "LXC";
}
lxcAsync().then((data) => {
console.log(data); // LXC
});
await的作用
正常情况下,await命令后面是一个 Promise 对象。当然也可以是原始类型和非Promise对象,但会被转成一个立即resolve的 Promise 对象,这是等同于同步操作。await表示函数等待promise返回结果了,再继续执行。
function delay() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('LXC');
}, 2000);
})
}
async function lxcAsync() {
let de = await delay();
console.log(de); // 2s后输出LXC
}
lxcAsync();
注意点
await关键字只能用于async函数执行上下文中。
async function lxcAsync() {
setTimeout(() => {
await 1; //await is only valid in async function
},1000)
}
lxcAsync();
上面便是一种错误用法,await并没有在lxcAsync函数执行上下文中,而是在setTimeout的回调函数中。
async function lxcAsync() {
setTimeout(() => {
await 1; //await is only valid in async function
},1000)
}
lxcAsync();
如果我们希望在某个异步函数的回调函数中使用await(如果使用过jest,应该会知道jest的异步测试就有这种需求),我们可以使用下列方式
function lxcAsync() {
setTimeout(async () => {
await 1;
},1000)
}
lxcAsync();
reject错误处理
如果await后面的Promise对象返回的是reject,那么我们需要如何处理呢?这时我们需要try-catch来处理。
function delay() {
return new Promise((resolve, reject) => {
reject('LXC');
})
}
async function lxcAsync() {
try {
let de = await delay();
console.log(de);
} catch (error) {
console.log(error); //输出LXC
}
}
lxcAsync();