JavaScript中async和await的使用以及佇列問題

程式設計師布歐發表於2022-06-27

巨集任務和微任務的佇列入門知識,可以參考之前的文章:

巨集任務和微任務在前端面試中,被經常提及到,包括口頭和筆試題

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的使用以及佇列問題

原始碼地址

歡迎關注公眾號:程式設計師布歐,不定期更新一些文章

創作不易,轉載請註明出處和作者。

相關文章