JavaScript中async和await的使用及隊(duì)列詳情
一、宏任務(wù)和微任務(wù)的隊(duì)列入門知識(shí),可以參考之前的文章:
[JavaScript的事件循環(huán)機(jī)制]
宏任務(wù)和微任務(wù)在前端面試中,被經(jīng)常提及到,包括口頭和筆試題
1.async && await概念
async:
- 使用async關(guān)鍵字聲明的函數(shù),是AsyncFunction構(gòu)造函數(shù)的實(shí)例,在async函數(shù)體內(nèi),可以使用await接收promise實(shí)例
- async和await關(guān)鍵字,在開發(fā)過程中,可以簡潔地去做一些異步操作。
await:
- await操作符接受一個(gè)Promise 對(duì)象,并且只能和異步函數(shù)async function搭配使用。
- await 表達(dá)式會(huì)暫停當(dāng)前 async function 的執(zhí)行,等待 Promise 處理完成。
- 若 Promise 正常處理 (fulfilled),其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達(dá)式的值,繼續(xù)執(zhí)行
- 若 Promise 處理異常 (rejected),await 表達(dá)式會(huì)把 Promise 的異常原因拋出。
- 如果 await 操作符后的表達(dá)式的值不是一個(gè) Promise,則返回該值本身。
2.async && await基本使用
/** * async 函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 * async 函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例, 并且其中允許使用await關(guān)鍵字。 * async和await關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為,而無需刻意地鏈?zhǔn)秸{(diào)用promise。 * * await 操作符用于等待一個(gè)Promise 對(duì)象。它只能在異步函數(shù) async function 中使用。 * await 表達(dá)式會(huì)暫停當(dāng)前 async function 的執(zhí)行,等待 Promise 處理完成。若 Promise 正常處理 (fulfilled),其回調(diào)的 resolve 函數(shù)參數(shù)作為 await 表達(dá)式的值,繼續(xù)執(zhí)行 * async function。 * 若 Promise 處理異常 (rejected),await 表達(dá)式會(huì)把 Promise 的異常原因拋出。 * 另外,如果 await 操作符后的表達(dá)式的值不是一個(gè) Promise,則返回該值本身。 * * * */ // 模擬請(qǐng)求接口 function userInfo() { return new Promise((resolve) => { setTimeout(() => { resolve("zhangsan"); }, 2000); }); } // 接收請(qǐng)求的返回值 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在面試時(shí)回遇到的隊(duì)列問題
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ù)隊(duì)列執(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這三個(gè)作為promise會(huì)放在異步隊(duì)列當(dāng)中,并且await后面的代碼會(huì)阻塞后續(xù)的代碼執(zhí)行,因此3也會(huì)作為異步任務(wù),放在await之后執(zhí)行
- 此時(shí),會(huì)先執(zhí)行5
- 所有的同步代碼執(zhí)行完成之后,從隊(duì)列中,執(zhí)行異步任務(wù),p1,awaitRes---->接口返回值---------------1
- 到這里值得注意的是,由于await會(huì)阻塞同步代碼的執(zhí)行,因此await執(zhí)行完成之后,會(huì)先執(zhí)行在它之后阻塞的同步代碼,執(zhí)行完成之后,才會(huì)執(zhí)行p2這個(gè)promise異步任務(wù)
所以整個(gè)代碼塊執(zhí)行的順序是:
1,4,2,5,p1,接口返回值---------------1,3,p2
三、總結(jié)
async和await作為ecmascript的新特性,目前更多的場(chǎng)景使用在前端獲取后端接口和進(jìn)行一些異步操作等。
到此這篇關(guān)于JavaScript中async和await的使用及隊(duì)列詳情的文章就介紹到這了,更多相關(guān)JavaScript中async和await內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS異步編程之generator與async/await語法糖詳解
- JavaScript中async與await實(shí)現(xiàn)原理與細(xì)節(jié)
- JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
- JavaScript引擎實(shí)現(xiàn)async/await的方法實(shí)例
- Javascript的promise,async和await的區(qū)別詳解
- Javascript中async與await的捕捉錯(cuò)誤詳解
- js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫法
- JavaScript async/await使用詳解
相關(guān)文章
全面了解javascript中的錯(cuò)誤處理機(jī)制
下面小編就為大家?guī)硪黄媪私鈐avascript中的錯(cuò)誤處理機(jī)制。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07javascript AutoScroller 函數(shù)類
javascript AutoScroller 自動(dòng)滾動(dòng)類代碼,學(xué)習(xí)類的朋友可以參考下。2009-05-05JS實(shí)現(xiàn)拖動(dòng)滾動(dòng)條評(píng)分的效果代碼分享
本文給大家基于js實(shí)現(xiàn)拖動(dòng)滾動(dòng)條評(píng)分效果,在項(xiàng)目開發(fā)中經(jīng)??梢杂玫降?,大家可以更加需要適當(dāng)?shù)奶砑有薷模瑢?duì)js評(píng)分效果感興趣的朋友一起看看吧2016-09-09