JavaScript中async和await的使用以及隊列問題
- 2022 年 6 月 27 日
- 筆記
- javascript, 前端
宏任務和微任務的隊列入門知識，可以參考之前的文章：
宏任務和微任務在前端面試中，被經常提及到，包括口頭和筆試題
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的使用以及隊列問題
源碼地址
歡迎關注公眾號：程式設計師布歐，不定期更新一些文章
創作不易，轉載請註明出處和作者。
