摘要:原因是的循環(huán)方法等是并行迭代,可以理解為的效果是無(wú)效的解決方案使用最原始的循環(huán)將上述的模擬異步任務(wù)修改為或參考連接用來(lái)處理異步在不起作用解決異步循環(huán)的使用方法
問(wèn)題描述
在進(jìn)行業(yè)務(wù)開發(fā)的過(guò)程中,使用了數(shù)組的高級(jí)函數(shù)map,同時(shí)使用了ES6語(yǔ)法async/await,發(fā)現(xiàn)在map循環(huán)下任務(wù)是異步執(zhí)行的,并不符合預(yù)期
例子說(shuō)明/** * 異步打印數(shù)據(jù) */ const echo = async (i) => { return new Promise((resolve,reject)=>{ setTimeout(() => { console.log("i===>", i,new Date().toLocaleTimeString()); resolve(i) ; }, 100); }) } /** * 模擬異步任務(wù) */ const task = async () => { dataArr.forEach( async( item, i ) => { await echo(i); }) } /** * 啟動(dòng)函數(shù)入口 */ const run = async () => { console.log("run-start====>date:", new Date().toLocaleDateString()) await task() ; console.log("run-end======>date:", new Date().toLocaleDateString()) } /** * 啟動(dòng)函數(shù) */ (async () => { console.log("start...") await run(); console.log("end...") })() //預(yù)期效果 start... run-start====>date: 2019-2-16 i===> 0 23:19:04 i===> 1 23:19:04 i===> 2 23:19:04 i===> 3 23:19:04 run-end======>date: 2019-2-16 end... //打印結(jié)果 start... run-start====>date: 2019-2-16 run-end======>date: 2019-2-16 end... i===> 0 23:19:04 i===> 1 23:19:04 i===> 2 23:19:04 i===> 3 23:19:04
從上面的例子可以看出,在map循環(huán)下使用await后, 函數(shù)結(jié)束標(biāo)志信號(hào)run-end先于異步任務(wù)數(shù)據(jù)i輸出,故task任務(wù)仍然是異步執(zhí)行,并不符合預(yù)期。原因是Array的循環(huán)方法map、forEach、filter、reduce、some、every等是并行迭代,可以理解為async/await的效果是無(wú)效的
解決方案使用最原始的for循環(huán)
for...of
將上述的模擬異步任務(wù)修改為
for (var i = 0; i < dataArr.length; i++) { await echo(i) } 或 for (const i of dataArr) { await echo(i) }參考連接
用 async/await 來(lái)處理異步
await在forEach不起作用解決
JavaScript 異步循環(huán) - async/await 的使用方法
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/101741.html
摘要:何為事件循環(huán)機(jī)制的任務(wù)分兩種,分別是同步任務(wù)和異步任務(wù)。如上圖所示主線程在執(zhí)行代碼的時(shí)候,遇到異步任務(wù)進(jìn)入并注冊(cè)回調(diào)函數(shù),有了運(yùn)行結(jié)果后將它添加到事件隊(duì)列中,然后繼續(xù)執(zhí)行下面的代碼,直到同步代碼執(zhí)行完。 我們知道,JavaScript作為瀏覽器的腳本語(yǔ)言,起初是為了與用戶交互和操作DOM,為了避免因?yàn)橥瑫r(shí)操作了同一DOM節(jié)點(diǎn)而引起沖突,被設(shè)計(jì)成為一種單線程語(yǔ)言。而單線程語(yǔ)言最大的特性就...
摘要:版本以及之前,本身還沒(méi)有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ),把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)。基本用法示例的回調(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的...
摘要:版本以及之前,本身還沒(méi)有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ),把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)。基本用法示例的回調(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的...
摘要:版本以及之前,本身還沒(méi)有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語(yǔ),把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)。基本用法示例的回調(diào)是一個(gè)異步的執(zhí)行過(guò)程。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的...
閱讀 904·2021-09-29 09:35
閱讀 1253·2021-09-28 09:36
閱讀 1522·2021-09-24 10:38
閱讀 1066·2021-09-10 11:18
閱讀 631·2019-08-30 15:54
閱讀 2496·2019-08-30 13:22
閱讀 1964·2019-08-30 11:14
閱讀 697·2019-08-29 12:35