通过网红“腰子姐”对话演示JavaScript中的async+await执行过程

async+await是ES7新增的异步处理方法，它为了更像同步代码而生，无需Promise+resolve+reject+then即可接收前一步数据，值得提醒的是 async function a(){} 返回的是Promise，所以也是可以使用then链式操作的。那么就直接复制下面代码看看吧！注意：为了更直观下文我采用了计时器，setTimeout是异步代码所以需要Promise，没特殊需求的就这样封装一个Promise对象即可：async function getBBQ_1(){ return “C：姐，来串腰子！”}

<script>
console.log("===========Async + Await===========");

function getBBQ_1(){
    return new Promise(resolve => {
        setTimeout(() => resolve("C：姐，来串腰子！"), 2000);//想了2秒
    });
}
function getBBQ_2(){
    return new Promise(resolve => {
        setTimeout(() => resolve("C：来啦~老弟！"), 1000);//秒回
    });
}
function getBBQ_3(){
    return new Promise(resolve => {
        setTimeout(() => resolve("C：老弟，腰子好了！"), 5000);//烤了5秒
    });
}
function getBBQ_4(){
    return new Promise(resolve => {
        setTimeout(() => resolve("C：买单，微信支付！"), 500);//微信支付
    });
}
function getBBQ_5(){
    return new Promise(resolve => {
        setTimeout(() => resolve("C：收摊！"), 1000);//收摊
    });
}
async function getBBQ(){
 var res1=await getBBQ_1();
 console.log(res1);
 var res2=await getBBQ_2();
 console.log(res2);
 var res3=await getBBQ_3();
 console.log(res3);
 var res4=await getBBQ_4(); 
 console.log(res4);
 var res5=await getBBQ_5(); 
 console.log(res5);
}
getBBQ();
</script>

F12—Sources 用断点看看效果吧