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

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

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的使用以及队列问题的更多相关文章

  1. C# 中 async 和 await 的基本使用

    C# 中 async 和 await 的基本使用 前言 经常在 C# 的代码中看到以 Async 结尾的方法,大概知道意为异步方法,但不知道怎么使用,也不知道如何定义. 对于"同步" ...

  2. C#中async和await用法

    .net 4.5中新增了async和await这一对用于异步编程的关键字. async放在方法中存在await代码的方法中,await放在调用返回Task的方法前. class Class1 { pr ...

  3. ES6中async与await的使用方法

    promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...

  4. JavaScript中的算法之美——栈、队列、表

    序 最近花了比较多的时间来学习前端的知识,在这个期间也看到了很多的优秀的文章,其中Aaron可能在这个算法方面算是我的启蒙,在此衷心感谢Aaron的付出和奉献,同时自己也会坚定的走前人这种无私奉献的分 ...

  5. ES6中async和await说明和用法

    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...

  6. C# 中的Async 和 Await 的用法详解

    众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...

  7. 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...

  8. 转:[你必须知道的异步编程]C# 5.0 新特性——Async和Await使异步编程更简单

    本专题概要: 引言 同步代码存在的问题 传统的异步编程改善程序的响应 C# 5.0 提供的async和await使异步编程更简单  async和await关键字剖析 小结 一.引言 在之前的C#基础知 ...

  9. [你必须知道的异步编程]C# 5.0 新特性——Async和Await使异步编程更简单

    本专题概要: 引言 同步代码存在的问题 传统的异步编程改善程序的响应 C# 5.0 提供的async和await使异步编程更简单  async和await关键字剖析 小结 一.引言 在之前的C#基础知 ...

随机推荐

  1. 【Azure 云服务】Azure Cloud Service (Extended Support) 云服务开启诊断日志插件 WAD Extension (Windows Azure Diagnostic) 无法正常工作的原因

    问题描述 在Azure中国区上面创建一个云服务(外延支持)后,根据官方文档(在云服务(外延支持)中应用 Azure 诊断扩展: https://docs.azure.cn/zh-cn/cloud-se ...

  2. Zabbix-Proxy 部署和运行

    Zabbix-Proxy 部署&运行 前提 版本: zabbix-server 5.4 任务: 通过SNMP监控网络设备,需要需通过zabbix-proxy 发送到zabbix-server. ...

  3. Java学习day8

    今天学习了package,import,final,static和多态 package可以理解为文件夹,因为有些类可能重名,如果在同一个目录下就无法正常实现,所有需要有不同的包来装对应的类 Java出 ...

  4. jquery版本的ajax请求

    首先引入 <script src="https://code.jquery.com/jquery-3.6.0.js"></script>   $ 和 jqu ...

  5. DOM 对象的重点核心

    概述 :  文档对象模型(Document Object Model,简称DOM ),是W3C组织推荐的处理可扩展标记语言 (HTML或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口, ...

  6. [AcWing 774] 最长单词

    点击查看代码 #include<iostream> using namespace std; string str, res; int main() { while (cin >&g ...

  7. 10个 Linux 命令,让你的操作更有效率

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 根据老九大师兄口头阐述,Linux是最适合开发的操作系统 ...

  8. 【低码】asp.net core 实体类可生产 CRUD 后台管理界面

    前言介绍 喜欢小规模团队的"单打独斗",有的时候即使在大公司,也经常做着3-5个人团队的小项目,相信很多人有类似的经历. 本文介绍如何将项目中已存在的[实体类],直接生产出 CRUD 后台管理界面. ...

  9. .NET程序设计实验2

    1.设计编写一个控制台应用程序,练习类的继承. (1) 编写一个抽象类 People,具有"姓名","年龄"字段,"姓名"属性,Work 方 ...

  10. Hibernate基础入门2

    HQL与Criteria HQL(Hibernate Query Language)-官方推荐面向对象的查询语言,与SQL不同,HQL中的对象名是区分大小写的(除了JAVA类和属性其他部分不区分大小写 ...