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#基础知 ...
随机推荐
- Hyperledger Fabric无系统通道启动及通道的创建和删除
前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织,但目前为止,我们启动 orderer 节点的方式都是通过系统通道的方式,这样自带系 ...
- 2021.11.02 eleveni的水省选题的记录
2021.11.02 eleveni的水省选题的记录 因为eleveni比较菜,所以eleveni决定从绿题开始水 --实际上菜菜的eleveni连绿题都不一定能水过/忍不住哭了 [P2217 HAO ...
- Web项目部署指南
Web项目部署指南 本文记录了部署Vue项目到阿里云服务器上的过程,其中云服务器的操作系统是CentOS 7,Web服务器用的是nginx.因为项目涉及发送异步请求,而由Flask编写的后端应用监听的 ...
- linux 下通过fork实现后台运行进程
1 # 通常建议使用双fork方法.在每个fork处,父级退出,子级继续 2 3 #!/usr/bin/env python 4 5 import time,platform 6 7 import o ...
- 漏洞复现:MS12-020 远程桌面协议RDP远程代码执行漏洞
漏洞复现:MS12-020 远程桌面协议RDP远程代码执行漏洞 攻击机:Kali2019 靶机:Win7 64位 解题步骤: 1.打开Kali2019和Win7 64位 ,确定IP地址是多少 2.确定 ...
- [AcWing 28] 在O(1)时间删除链表结点
点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * L ...
- sqlx操作MySQL实战及其ORM原理
sqlx是Golang中的一个知名三方库,其为Go标准库database/sql提供了一组扩展支持.使用它可以方便的在数据行与Golang的结构体.映射和切片之间进行转换,从这个角度可以说它是一个OR ...
- 多级级联数据的展示-vue递归组件
如果采用普通的for循环方式,没办法确认数据到底有几层,要写几个for循环,所以想到了递归的方法. 那么在vue里然后实现呢? vue递归组件(组件中使用自己) 父组件中把数据以props形式传给子组 ...
- uniapp中IOS安卓热更新和整包更新app更新
在App.vue中 onLaunch: function() { console.log('App Launch'); // #ifdef APP-PLUS this.getVersion(); // ...
- 【系统】查看windows系统是否永久激活
查看windows系统是否永久激活 查看激活时间 slmgr.vbs -xpr 查看激活详情 slmgr.vbs -dlv