async
async作为一个关键字放到函数前面,async function可以定义一个异步函数。
async function func() {
return 'hi';
}
console.log(func()) //Promise {<resolved>: "hi"}
async 函数的返回值很特殊: 不管在函数体内 return 了什么值, async 函数的实际返回值总是一个 Promise 对象。对于promise对象,我们应该都知道想要获取promise的返回结果就需要用到then/catch方法来添加回调函数。
func().then((data)=>{
console.log(data) //hi
})
那么如果async函数里面没有返回值呢,它会输出什么
async function func() {
console.log('hi');
}
console.log(func())
//输出为:
//hi
//Promise {<resolved>: undefined}
如果async 函数执行完,返回的promise 没有注册回调函数,async函数的调用,就是执行了函数体,和普通函数没有区别,唯一的区别就是函数执行完会返回一个promise 对象。
await
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
await它后面可以放任何表达式,等表达式执行完后并返回结果。如果后边的是Promise,那么就会Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
function func1() {
return "func1";
}
async function func2() {
return Promise.resolve("hello async");
}
async function func() {
const f1 = await func1();
const f2 = await func2();
console.log(f1, f2);
}
func();
//输出
//func1 hello async
//Promise {<resolved>: undefined}
f2中,await等待的虽然是promise对象,但不必写.then(…),直接可以得到返回值。
有人可能有疑问了,没有写then/catch如今捕获promise返回的rejected状态呢?
其实很简单嘛,可以直接用标准的try catch语法捕捉错误。
function func1() {
return "func1";
}
async function func2() {
return Promise.reject("rejected");
}
async function func() {
try{
const f1 = await func1();
const f2 = await func2();
console.log(f1+f2)
}catch(error){
console.log(error)
}
}
func();
//rejected
//Promise {<resolved>: undefined}
总结:
- async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
- async/await是基于Promise实现的,它不能用于普通的回调函数。
- async/await与Promise一样,是非阻塞的。
- async/await使得异步代码看起来像同步代码,这正是它的魔力所在。