js中的异步神器async/await

使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性。

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}

来源：CSDN

作者：DrAlexsander

链接：https://blog.csdn.net/qq_42880714/article/details/104497383