JavaScript中async和await的使用及隊列詳情
一、宏任務(wù)和微任務(wù)的隊列入門知識,可以參考之前的文章:
[JavaScript的事件循環(huán)機制]
宏任務(wù)和微任務(wù)在前端面試中,被經(jīng)常提及到,包括口頭和筆試題
1.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 表達式會暫停當前 async function 的執(zhí)行,等待 Promise 處理完成。
- 若 Promise 正常處理 (fulfilled),其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達式的值,繼續(xù)執(zhí)行
- 若 Promise 處理異常 (rejected),await 表達式會把 Promise 的異常原因拋出。
- 如果 await 操作符后的表達式的值不是一個 Promise,則返回該值本身。
2.async && await基本使用
/**
* async 函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。
* async 函數(shù)是AsyncFunction構(gòu)造函數(shù)的實例, 并且其中允許使用await關(guān)鍵字。
* async和await關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為,而無需刻意地鏈式調(diào)用promise。
*
* await 操作符用于等待一個Promise 對象。它只能在異步函數(shù) async function 中使用。
* await 表達式會暫停當前 async function 的執(zhí)行,等待 Promise 處理完成。若 Promise 正常處理 (fulfilled),其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達式的值,繼續(xù)執(zhí)行
* 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結(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會放在異步隊列當中,并且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的新特性,目前更多的場景使用在前端獲取后端接口和進行一些異步操作等。
到此這篇關(guān)于JavaScript中async和await的使用及隊列詳情的文章就介紹到這了,更多相關(guān)JavaScript中async和await內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript AutoScroller 函數(shù)類
javascript AutoScroller 自動滾動類代碼,學(xué)習(xí)類的朋友可以參考下。2009-05-05

