“这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战”
1:async如何使用和它的背后原理？
1.async 作为一个关键字放在函数前面，用来表示该函数是异步的。且背后原理就是promise
async function fn1() {
return '你好dlz'
}
function fn2() {
return new Promise((res,rej)=>{
res('你好zjx')
})
}
console.log(fn1())//Promise { '你好dlz' }
console.log(fn2())//Promise { '你好zjx' }
2.既然原理是prmise的话就可用通过.then获取到成功回调(证明了背后原理是promise)
async function fn1() {
return 'dlz'
}
fn1().then((res)=>{
console.log(res);//打印出来的是dlz
});
3.await如何使用(顾名思义)
这里定义了一个异步函数
function fn2(name) {
return new Promise((res,rej)=>{
setTimeout(()=>{
res(name+'真帅')
},2000)
})
}
！！！重点 使用await的时候函数必须要用async定义函数
async function fn1() {
console.log(await fn2('dlz'))
console.log(666)
}
fn1()//dlz真帅 666
function fn1() {
fn2('dlz').then((res)=>{
console.log(res)
console.log(666)
})
}//dlz真帅 666
fn1()
解释:按道理的话fn2中的setTimeout是一个异步任务，应该先输出666的 然而此时先输出了dlz真帅， 说明了await后面的promise表达式没执行完毕之前，下面的代码是阻塞掉的。
**
以上面的代码可能还看不出await的真正作用是什么，如果我们用到好多个promise对象的返回值呢？
**
function fn2(num) {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(num+10);
},1000);
});
}
async function fn1() {
fn2(10).then((res1)=>{
fn2(20).then((res2)=>{
fn2(30).then((res3)=>{
console.log(res1+res2+res3);
});
});
});
}
fn1(); // 三秒之后打印出90
function fn2(num) {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(num+10);
},1000);
});
}
async function fn1() {
const res1=await fn2(10); //可以直接通过await拿到返回值
const res2=await fn2(20);
const res3=await fn2(30);
console.log(res1+res2+res3);
}
fn1(); // 三秒之后打印出90
4.结论 在这里我们是不是可以明白了await的作用， 在这里我们不需要通过then方法去获取promise的返回值。这样我们用到多个promise对象的返回值是不是就方便很多了，就避免了promise的多层的嵌套。
await在某些情况下可以阻塞后面的代码 可以方便的获取promise的返回值，避免深层的嵌套**
