JavaScript中async和await的使用及队列详情

 更新时间:2022年07月01日 15:23:30   作者:程序员布欧  
这篇文章主要介绍了JavaScript中async和await的使用及队列详情,主要围绕js中async和await简单解析展开面试中可能会问到的关于队列的一些场景和知识点,需要的朋友可以参考一下

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

[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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript动态创建及删除元素的方法

    javascript动态创建及删除元素的方法

    这篇文章主要介绍了javascript动态创建及删除元素的方法,涉及针对DOM元素操作的技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • js提示框替代系统alert,自动关闭alert对话框的实现方法

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    下面小编就为大家带来一篇js提示框替代系统alert,自动关闭alert对话框的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 深入理解JavaScript 中的执行上下文和执行栈

    深入理解JavaScript 中的执行上下文和执行栈

    这篇文章主要介绍了JavaScript 中的执行上下文和执行栈的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • JavaScript进阶知识点作用域详解

    JavaScript进阶知识点作用域详解

    这篇文章主要介绍了JavaScript进阶讲解一作用域,主要包括作用域、函数、闭包、面向对象、ES新特性、事件循环、微任务、宏任务、内存管理、Promise、await、 asnyc、防抖、节流等等知识点,需要的朋友可以参考下
    2022-05-05
  • Bootstrap CSS组件之输入框组

    Bootstrap CSS组件之输入框组

    这篇文章主要为大家详细介绍了Bootstrap CSS组件之输入框组(input-group),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 用headjs来管理和加载js 提高网站加载速度

    用headjs来管理和加载js 提高网站加载速度

    headjs其实是一整套的工具,本文介绍的是它其中的Javascript Loader功能。需要的朋友可以参考下
    2016-11-11
  • 微信小程序返回箭头跳转到指定页面实例解析

    微信小程序返回箭头跳转到指定页面实例解析

    这篇文章主要介绍了微信小程序返回箭头跳转到指定页面实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • JS实现的自动打字效果示例

    JS实现的自动打字效果示例

    这篇文章主要介绍了JS实现的自动打字效果,涉及javascript递归算法、字符串操作及事件函数相关使用技巧,需要的朋友可以参考下
    2017-03-03
  • JavaScript事件监听之键盘事件详细介绍

    JavaScript事件监听之键盘事件详细介绍

    在实际应用中我们常常会遇到监听按键输入和鼠标点击事件,下面这篇文章主要给大家介绍了关于JavaScript事件监听之键盘事件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 如何正确理解javascript的模块化

    如何正确理解javascript的模块化

    模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯定会乱套,下面介绍几种JS的模块化的规范。
    2017-03-03

最新评论