JavaScript中async和await的使用及队列详情
一、宏任务和微任务的队列入门知识,可以参考之前的文章:
1.async && await概念
2.async && await基本使用
二、async&& await结合promise在面试时回遇到的队列问题
三、总结
一、宏任务和微任务的队列入门知识,可以参考之前的文章:[JavaScript的事件循环机制]
宏任务和微任务在前端面试中,被经常提及到,包括口头和笔试题
1.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,则返回该值本身。
2.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的新特性,目前更多的场景使用在前端获取后端接口和进行一些异步操作等。
到此这篇关于JavaScript中async和await的使用及队列详情的文章就介绍到这了,更多相关JavaScript中async和await内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!
相关内容
-
计算机主板BIOS设置详细-BIOS知识
计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主...
-
1394连接是什么1394网络适配器知识
1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这...
-
从硬件安装到系统安装的计算机知识汇编
从硬件安装到系统安装的计算机知识汇编,,我经常有朋友帮助说如...
-
2010年底DIY硬件总结和安装参考
2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过...
-
而不是一个光盘U盘U盘安装系统的原理_电脑知识
而不是一个光盘U盘U盘安装系统的原理_电脑知识,,核心提示:光盘...
-
什么是无线局域网无线局域网的基本知识介绍
什么是无线局域网无线局域网的基本知识介绍,, 无线局域网虽然...
-
电脑主板品牌的一些基本知识
电脑主板品牌的一些基本知识,,组装的电脑不再是什么奇怪的事情...
-
保持笔记本电脑的一些知识和技巧
保持笔记本电脑的一些知识和技巧,,笔记本的价格比前些年便宜很...
-
新建参考线快捷键|新建参考线快捷键Mac电脑
新建参考线快捷键|新建参考线快捷键Mac电脑,,新建参考线快捷键...
-
移动硬盘如何使用移动硬盘维护知识
移动硬盘如何使用移动硬盘维护知识,,现在移动硬盘的广泛使用和...
-
取消参考线快捷键|取消参考线快捷键怎么设置
取消参考线快捷键|取消参考线快捷键怎么设置,,1. 取消参考线快...
-
双核CPU知识让你更容易购买
双核CPU知识让你更容易购买,,要买一台双核电脑,首先要了解双核...
-
天猫和淘宝、淘宝、天猫是_计算机知识之间比较
天猫和淘宝、淘宝、天猫是_计算机知识之间比较好,,核心提示:网...
-
基本知识:组装计算机的基本步骤
基本知识:组装计算机的基本步骤,,如何组装一台性价比高、稳定性...
-
你必须掌握计算机病毒知识的收集
你必须掌握计算机病毒知识的收集,,你必须掌握计算机病毒知识的...