首页IT科技js中的async(JavaScript中async和await的使用以及队列问题)

js中的async(JavaScript中async和await的使用以及队列问题)

时间2025-07-10 14:00:35分类IT科技浏览4889
导读:宏任务和微任务的队列入门知识,可以参考之前的文章: JavaScript的事件循环机制...

宏任务和微任务的队列入门知识             ,可以参考之前的文章:

JavaScript的事件循环机制

宏任务和微任务在前端面试中                  ,被经常提及到      ,包括口头和笔试题

async && await概念

async

使用async关键字声明的函数          ,是AsyncFunction构造函数的实例                  ,在async函数体内         ,可以使用await接收promise实例 async和await关键字       ,在开发过程中                   ,可以简洁地去做一些异步操作             。

await

await操作符接受一个Promise 对象            ,并且只能和异步函数async function搭配使用                  。 await 表达式会暂停当前 async function 的执行   ,等待 Promise 处理完成      。 若 Promise 正常处理 (fulfilled)                   ,其回调的 resolve 函数参数作为 await 表达式的值               ,继续执行 若 Promise 处理异常 (rejected),await 表达式会把 Promise 的异常原因抛出          。 如果 await 操作符后的表达式的值不是一个 Promise                ,则返回该值本身                  。

async && await基本使用

/** * async 函数是使用async关键字声明的函数         。 * async 函数是AsyncFunction构造函数的实例                  , 并且其中允许使用await关键字       。 * async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为   ,而无需刻意地链式调用promise                   。 * * await 操作符用于等待一个Promise 对象            。它只能在异步函数 async function 中使用   。 * await 表达式会暂停当前 async function 的执行             ,等待 Promise 处理完成                   。若 Promise 正常处理 (fulfilled)                  ,其回调的 resolve 函数参数作为 await 表达式的值      ,继续执行 * async function               。 * 若 Promise 处理异常 (rejected)          ,await 表达式会把 Promise 的异常原因抛出。 * 另外                  ,如果 await 操作符后的表达式的值不是一个 Promise         ,则返回该值本身                。 * * * */ // 模拟请求接口 function userInfo() { return new Promise((resolve) => { setTimeout(() => { resolve("zhangsan"); }, 2000); }); } // 接收请求的返回值 async function fetchUserInfo() { let res = await userInfo(); console.log(res); } fetchUserInfo(); // zhangsan // 不是异步promise let testFn = function test(){} async function notPromise() { var str = await testFn; console.log(str); // function test(){} } notPromise();

async&& await结合promise在面试时回遇到的队列问题

function userInfo() { return new Promise((resolve) => { setTimeout(() => { resolve(`接口返回值---------------1`); }, 2000); }); } console.log("1"); let p1 = new Promise((resolve, reject) => { resolve("p1"); }); let p2 = new Promise((resolve, reject) => { resolve("p2"); }); async function getUserInfo() { console.log("2"); p1.then((res) => { console.log(res); }); var awaitRes = await userInfo(); console.log(awaitRes); // 接口返回值---------------1 p2.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作为异步方法   ,优先执行同步代码2 p1和userInfo方法                   ,p2这三个作为promise会放在异步队列当中,并且await后面的代码会阻塞后续的代码执行               ,因此3也会作为异步任务,放在await之后执行 此时                ,会先执行5 所有的同步代码执行完成之后                  ,从队列中   ,执行异步任务             ,p1,awaitRes---->接口返回值---------------1 到这里值得注意的是                  ,由于await会阻塞同步代码的执行      ,因此await执行完成之后          ,会先执行在它之后阻塞的同步代码                  ,执行完成之后         ,才会执行p2这个promise异步任务

所以整个代码块执行的顺序是:

1       ,4                   ,2            ,5   ,p1                   ,接口返回值---------------1               ,3,p2

总结:

async和await作为ecmascript的新特性                ,目前更多的场景使用在前端获取后端接口和进行一些异步操作等                  。 作为面试点                  ,async和await   ,结合promise和定时器等结合起来             ,作为一些面试的必备知识   。 宏任务和微任务的队列入门知识                  ,可以参考之前的文章: JavaScript的事件循环机制 详细的async和await的使用      ,可以参考: 阮一峰ES6 async 函数

以上就是js中async和await简单解析以及在面试中可能会问到的关于队列的一些场景和知识点          ,有任何问题欢迎留言                  ,后续的文章整理然后作为补充             。

文章博客地址:JavaScript中async和await的使用以及队列问题

源码地址 码云

https://gitee.com/lewyon/vue-note

githup

https://github.com/akari16/vue-note

欢迎关注公众号:程序员布欧         ,不定期更新一些文章

创作不易       ,转载请注明出处和作者                  。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
mac的邮件上面怎么添加新的邮箱(苹果MAC电脑自带的邮件Mail里添加带链接和图片的邮件签名) base64加密解密