async和await详解:
什么是async/await
async 定义异步函数
⾃动把函数转换为promise
当调⽤异步函数时,函数返回值会被resolve处理
异步函数内部可以使⽤await
await 暂停异步函数的执⾏
当使⽤在promise 前⾯是,await等待promise完成,并返回promise的结果
await只能和promise⼀起使⽤,不能和callback⼀起使⽤
await只能和async函数中使⽤,【async和await两者必须搭配使⽤】
async 和 await 的使⽤场景:
解决了 promise 中的点 then 链
业务需求:分多个步骤完成,每个步骤都是异步的,⽽且依赖于上⼀个步骤的结果,⽤setTimeout来模拟异步操作原始的写法
/**
* 传⼊参数 n,表⽰这个函数执⾏的时间(毫秒)
* 执⾏的结果是 n + 200,这个值将⽤于下⼀步骤
*/
function takeLongTime(n){
return new Promise(resolve =>{
setTimeout(()=>resolve(n +200), n);
});
}
function step1(n){
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n){
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n){
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
现在使⽤Promise⽅式来实现:
function doIt(){
console.time("doIt");
const time1 =300;
step1(time1)
.then(time2 =>step2(time2))
await和async使用方法.then(time3 =>step3(time3))
.then(result =>{
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
现在使⽤async和await来实现
async function doIt(){
console.time("doIt");
const time1 =300;
const time2 =await step1(time1);
const time3 =await step2(time2);
const result =await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
总结:
使⽤ async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提⾼代码的简洁性和可读性。
Async Await 的优点:
1、解决了回调地狱的问题
2、⽀持并发执⾏
3、可以添加返回值 return xxx;
4、可以在代码中添加try/catch捕获错误
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论