JavaScript中async和await的使用以及队列问题
2022/6/29 4:20:16
本文主要是介绍JavaScript中async和await的使用以及队列问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
宏任务和微任务在前端面试中,被经常提及到,包括口头和笔试题
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
创作不易,转载请注明出处和作者。
这篇关于JavaScript中async和await的使用以及队列问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性