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的使用以及队列问题
源码地址
欢迎关注公众号:程序员布欧,不定期更新一些文章
创作不易,转载请注明出处和作者。
JavaScript中async和await的使用以及队列问题的更多相关文章
- C# 中 async 和 await 的基本使用
C# 中 async 和 await 的基本使用 前言 经常在 C# 的代码中看到以 Async 结尾的方法,大概知道意为异步方法,但不知道怎么使用,也不知道如何定义. 对于"同步" ...
- C#中async和await用法
.net 4.5中新增了async和await这一对用于异步编程的关键字. async放在方法中存在await代码的方法中,await放在调用返回Task的方法前. class Class1 { pr ...
- ES6中async与await的使用方法
promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...
- JavaScript中的算法之美——栈、队列、表
序 最近花了比较多的时间来学习前端的知识,在这个期间也看到了很多的优秀的文章,其中Aaron可能在这个算法方面算是我的启蒙,在此衷心感谢Aaron的付出和奉献,同时自己也会坚定的走前人这种无私奉献的分 ...
- ES6中async和await说明和用法
昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...
- C# 中的Async 和 Await 的用法详解
众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...
- 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单
一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...
- 转:[你必须知道的异步编程]C# 5.0 新特性——Async和Await使异步编程更简单
本专题概要: 引言 同步代码存在的问题 传统的异步编程改善程序的响应 C# 5.0 提供的async和await使异步编程更简单 async和await关键字剖析 小结 一.引言 在之前的C#基础知 ...
- [你必须知道的异步编程]C# 5.0 新特性——Async和Await使异步编程更简单
本专题概要: 引言 同步代码存在的问题 传统的异步编程改善程序的响应 C# 5.0 提供的async和await使异步编程更简单 async和await关键字剖析 小结 一.引言 在之前的C#基础知 ...
随机推荐
- 【Azure 云服务】Azure Cloud Service (Extended Support) 云服务开启诊断日志插件 WAD Extension (Windows Azure Diagnostic) 无法正常工作的原因
问题描述 在Azure中国区上面创建一个云服务(外延支持)后,根据官方文档(在云服务(外延支持)中应用 Azure 诊断扩展: https://docs.azure.cn/zh-cn/cloud-se ...
- Zabbix-Proxy 部署和运行
Zabbix-Proxy 部署&运行 前提 版本: zabbix-server 5.4 任务: 通过SNMP监控网络设备,需要需通过zabbix-proxy 发送到zabbix-server. ...
- Java学习day8
今天学习了package,import,final,static和多态 package可以理解为文件夹,因为有些类可能重名,如果在同一个目录下就无法正常实现,所有需要有不同的包来装对应的类 Java出 ...
- jquery版本的ajax请求
首先引入 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> $ 和 jqu ...
- DOM 对象的重点核心
概述 : 文档对象模型(Document Object Model,简称DOM ),是W3C组织推荐的处理可扩展标记语言 (HTML或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口, ...
- [AcWing 774] 最长单词
点击查看代码 #include<iostream> using namespace std; string str, res; int main() { while (cin >&g ...
- 10个 Linux 命令,让你的操作更有效率
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 根据老九大师兄口头阐述,Linux是最适合开发的操作系统 ...
- 【低码】asp.net core 实体类可生产 CRUD 后台管理界面
前言介绍 喜欢小规模团队的"单打独斗",有的时候即使在大公司,也经常做着3-5个人团队的小项目,相信很多人有类似的经历. 本文介绍如何将项目中已存在的[实体类],直接生产出 CRUD 后台管理界面. ...
- .NET程序设计实验2
1.设计编写一个控制台应用程序,练习类的继承. (1) 编写一个抽象类 People,具有"姓名","年龄"字段,"姓名"属性,Work 方 ...
- Hibernate基础入门2
HQL与Criteria HQL(Hibernate Query Language)-官方推荐面向对象的查询语言,与SQL不同,HQL中的对象名是区分大小写的(除了JAVA类和属性其他部分不区分大小写 ...