宏任務(wù)和微任務(wù)的隊列入門知識，可以參考之前的文章：

• JavaScript的事件循環(huán)機(jī)制

宏任務(wù)和微任務(wù)在前端面試中，被經(jīng)常提及到，包括口頭和筆試題

元寶山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

async && await概念

async

• 使用async關(guān)鍵字聲明的函數(shù)，是AsyncFunction構(gòu)造函數(shù)的實例，在async函數(shù)體內(nèi)，可以使用await接收promise實例
• async和await關(guān)鍵字，在開發(fā)過程中，可以簡潔地去做一些異步操作。

await

• await操作符接受一個Promise 對象，并且只能和異步函數(shù)async function搭配使用。
• await 表達(dá)式會暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。
• 若 Promise 正常處理 (fulfilled)，其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達(dá)式的值，繼續(xù)執(zhí)行
• 若 Promise 處理異常 (rejected)，await 表達(dá)式會把 Promise 的異常原因拋出。
• 如果 await 操作符后的表達(dá)式的值不是一個 Promise，則返回該值本身。

async && await基本使用

/**
 * async 函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。
 * async 函數(shù)是AsyncFunction構(gòu)造函數(shù)的實例， 并且其中允許使用await關(guān)鍵字。
 * async和await關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為，而無需刻意地鏈?zhǔn)秸{(diào)用promise。
 *
 * await  操作符用于等待一個Promise 對象。它只能在異步函數(shù) async function 中使用。
 * await 表達(dá)式會暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。若 Promise 正常處理 (fulfilled)，其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達(dá)式的值，繼續(xù)執(zhí)行
 * async function。
 * 若 Promise 處理異常 (rejected)，await 表達(dá)式會把 Promise 的異常原因拋出。
 * 另外，如果 await 操作符后的表達(dá)式的值不是一個 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結(jié)合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(); // 異步方法，加入任務(wù)隊列執(zhí)行
console.log("5");

/**
 *
 * 執(zhí)行順序
 *
 * 1
 * 4
 * 2
 * 5
 * p1
 * 接口返回值---------------1
 * 3
 * p2
 *
 *
 * */
 

• 同步任務(wù)1，4，執(zhí)行
• getUserInfo作為異步方法，優(yōu)先執(zhí)行同步代碼2
• p1和userInfo方法，p2這三個作為promise會放在異步隊列當(dāng)中,并且await后面的代碼會阻塞后續(xù)的代碼執(zhí)行，因此3也會作為異步任務(wù)，放在await之后執(zhí)行
• 此時，會先執(zhí)行5
• 所有的同步代碼執(zhí)行完成之后，從隊列中，執(zhí)行異步任務(wù)，p1,awaitRes---->接口返回值---------------1
• 到這里值得注意的是，由于await會阻塞同步代碼的執(zhí)行，因此await執(zhí)行完成之后，會先執(zhí)行在它之后阻塞的同步代碼，執(zhí)行完成之后，才會執(zhí)行p2這個promise異步任務(wù)

所以整個代碼塊執(zhí)行的順序是：

1，4，2，5，p1，接口返回值---------------1，3，p2

總結(jié)：

• async和await作為ecmascript的新特性，目前更多的場景使用在前端獲取后端接口和進(jìn)行一些異步操作等。
• 作為面試點，async和await，結(jié)合promise和定時器等結(jié)合起來，作為一些面試的必備知識。
• 宏任務(wù)和微任務(wù)的隊列入門知識，可以參考之前的文章：
• JavaScript的事件循環(huán)機(jī)制
• 詳細(xì)的async和await的使用，可以參考：
• 阮一峰ES6 async 函數(shù)

以上就是js中async和await簡單解析以及在面試中可能會問到的關(guān)于隊列的一些場景和知識點，有任何問題歡迎留言，后續(xù)的文章整理然后作為補(bǔ)充。

文章博客地址：JavaScript中async和await的使用以及隊列問題

源碼地址

• 碼云 https://gitee.com/lewyon/vue-note

• githup https://github.com/akari16/vue-note

歡迎關(guān)注公眾號：程序員布?xì)W，不定期更新一些文章

創(chuàng)作不易，轉(zhuǎn)載請注明出處和作者。