macrotasks和microtasks队列的入门知识可以参考之前的文章:JavaScript事件循环机制macrotasks和microtasks在前端面试中经常被提及。包括口试和笔试题async&&await概念async用async关键字声明的函数是AsyncFunction构造函数的一个实例。在async函数体中,await可用于接收promise实例async和await关键字。在开发过程中,可以简洁的做一些异步操作。awaitawait运算符接受一个Promise对象,并且只能与async函数一起使用。await表达式将暂停当前异步函数的执行,等待Promise被处理。如果Promise被正常处理(fulfilled),回调的resolve函数参数作为await表达式的值,继续执行。如果Promise处理异常(被拒绝),await表达式会抛出Promise的异常原因。如果await运算符之后的表达式值不是Promise,则返回值本身。async&&await基本用法/***异步函数是使用async关键字声明的函数。*async函数是AsyncFunction构造函数的一个实例,其中允许使用await关键字。*async和await关键字允许我们以更简洁的方式编写基于Promise的异步行为,而无需故意链接承诺。**await运算符用于等待Promise对象。它只能在异步函数内部使用。*await表达式会暂停当前async函数的执行,等待Promise处理完毕。如果Promise被正常处理(fulfilled),其回调的resolve函数参数将作为await表达式的值,并继续执行*async函数。*如果Promise处理了异常(被拒绝),await表达式会抛出Promise的异常原因。*或者,如果await运算符之后的表达式的值不是Promise,则返回该值本身。****///模拟请求接口函数userInfo(){returnnewPromise((resolve)=>{setTimeout(()=>{resolve("zhangsan");},2000);});}//接收请求的返回值asyncfunctionfetchUserInfo(){letres=awaituserInfo();console.log(res);}fetchUserInfo();//zhangsan//不是异步promiselettestFn=functiontest(){}asyncfunctionnotPromise(){varstr=awaittestFn;控制台日志(海峡);//functiontest(){}}notPromise();async&&await结合promise返回面试中遇到的队列问题functionuserInfo(){returnnewPromise((resolve)=>{setTimeout(()=>{resolve(`接口返回值-------------1`);},2000);});}console.log("1");让p1=newPromise((resolve,reject)=>{resolve("p1");});letp2=newPromise((resolve,reject)=>{resolve("p2");});异步函数getUserInfo(){console.log("2");p1.then((res)=>{console.log(res);});varawaitRes=awaituserInfo();控制台日志(awaitRes);//接口返回值--------------1p2.then((res)=>{console.log(res);});console.log("3");}console.log("4");getUserInfo();//异步方法,加入任务队列执行console.log("5");/****执行顺序**1*4*2*5*p1*接口返回值--------------1*3*p2****/同步任务1、4、将getUserInfo作为异步方法执行,先执行同步代码2p1和userInfo方法。三个p2会作为promises放在异步队列中,await后面的代码会阻塞后续代码的执行,所以3也会作为异步任务放在Executeafterawait时,此时会先执行5。所有同步代码执行完毕后,从队列中执行异步任务,p1,awaitRes---->接口返回值--------------1这里值得注意的是,由于await会阻塞同步代码的执行,当await执行完成后,先执行阻塞在其后的同步代码。执行完成后,会执行p2的promise异步任务。所以整个代码块的执行顺序是:1,4,2,5,p1,接口返回值----------------1,3,p2总结:async和await都是ecmascript的新特性,目前更多场景使用前端获取后端接口并进行一些异步操作作为面试点,async和await,结合promise和timer等,作为面试的一些必备知识.关于宏任务和微任务队列的介绍知识可以参考之前的文章:JavaScript事件循环机制。async和await的详细使用可以参考:阮一峰ES6async函数以上是js和面试中async和await的简单分析,可能会问到的关于队列的一些场景和知识点,欢迎留言有问题可以留言,后续文章会整理补充。文章博客地址:JavaScript中async和await的使用及队列问题源码地址https://gitee.com/lewyon/vue-notegithubhttps://github.com/akari16/vue-note欢迎访问关注公众号:程序员布欧,时不时更新一些文章不易,转载请注明出处和作者。
