说一说async和await
async/await是非常棒的语法糖,可以说他是解决异步问题的最终解决方案。从字面意思来理解。async 是异步的意思,而 await 是 等待 ,所以理解 async用于申明一个function是异步的,而 await 用于等待一个异步方法执行完成。
# 什么是async
async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。相较于 Generator,async 函数的改进在于下面四点:
内置执行器: Generator 函数的执行必须依靠执行器,而 async 函数自带执行器,调用方式跟普通函数的调用一样
更好的语义:async 和 await 相较于 * 和 yield 更加语义化
更广的适用性:co 模块约定,yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)
返回值是 Promise:async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用
# async作用
async声明function是一个异步函数,返回一个promise对象,可以使用 then 方法添加回调函数。async函数内部return语句返回的值,会成为then方法回调函数的参数。
async function test() {
return 'test';
}
console.log(test); // [AsyncFunction: test] async函数是[`AsyncFunction`]构造函数的实例
console.log(test()); // Promise { 'test' }
// async返回的是一个promise对象
test().then(res=>{
console.log(res); // test
})
// 如果async函数没有返回值 async函数返回一个undefined的promise对象
async function fn() {
console.log('没有返回');
}
console.log(fn()); // Promise { undefined }
// 可以看到async函数返回值和Promise.resolve()一样,将返回值包装成promise对象,如果没有返回值就返回undefined的promise对象
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# await是什么
await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果,也就是说它会阻塞后面的代码,等待 Promise 对象结果。如果等待的不是 Promise 对象,则返回该值本身。
async function test() {
return new Promise((resolve)=>{
setTimeout(() => {
resolve('test 1000');
}, 1000);
})
}
function fn() {
return 'fn';
}
async function next() {
let res0 = await fn(),
res1 = await test(),
res2 = await fn();
console.log(res0);
console.log(res1);
console.log(res2);
}
next(); // 1s 后才打印出结果 为什么呢 就是因为 res1在等待promise的结果 阻塞了后面代码。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# async 函数的错误处理
添加 try/catch:
// 正确的写法
let a;
async function correct() {
try {
await Promise.reject('error')
} catch (error) {
console.log(error);
}
a = await 1;
return a;
}
correct().then(v => console.log(a)); // 1
2
3
4
5
6
7
8
9
10
11
12
13
# 参考文章链接
理解 async/await (opens new window)
async/await 优雅永不过时 (opens new window)
一次性让你懂async/await,解决回调地狱 (opens new window)