位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

[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基本使用


// 模拟请求接口
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，执行
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