學習JavaScript循環下的async/await

Ilikewhite 發布于2019-08-23 15:14 / 1380人閱讀

摘要：原因是的循環方法等是并行迭代，可以理解為的效果是無效的解決方案使用最原始的循環將上述的模擬異步任務修改為或參考連接用來處理異步在不起作用解決異步循環的使用方法

問題描述

在進行業務開發的過程中，使用了數組的高級函數map，同時使用了ES6語法async/await，發現在map循環下任務是異步執行的，并不符合預期

例子說明

/**
 * 異步打印數據
 */
const echo = async (i) => {
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            console.log("i===>", i,new Date().toLocaleTimeString());
            resolve(i) ;
        }, 100);
    })

}
/**
 * 模擬異步任務
 */
const task = async () => {
    dataArr.forEach( async( item, i ) => {
        await echo(i);
    })
}
/**
 * 啟動函數入口
 */
const run = async () => {
    console.log("run-start====>date:", new Date().toLocaleDateString())
    await task() ;
    console.log("run-end======>date:", new Date().toLocaleDateString())
}
/**
* 啟動函數
*/
(async () => {
    console.log("start...")
    await run();
    console.log("end...")
})()

//預期效果
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...

//打印結果
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循環下使用await后，函數結束標志信號run-end先于異步任務數據i輸出，故task任務仍然是異步執行，并不符合預期。原因是Array的循環方法map、forEach、filter、reduce、some、every等是并行迭代，可以理解為async/await的效果是無效的

解決方案

使用最原始的for循環

for...of

將上述的模擬異步任務修改為

 for (var i = 0; i < dataArr.length; i++) {
     await echo(i)
 }
 或
 for (const i of dataArr) {
     await echo(i)
 }

參考連接

用 async/await 來處理異步
await在forEach不起作用解決
JavaScript 異步循環 - async/await 的使用方法

云服務器 GPU云服務器 async await javascript循環嵌套循環javascript javascript for循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101741.html

理清瀏覽器下的事件循環機制（Event Loop）

摘要：何為事件循環機制的任務分兩種，分別是同步任務和異步任務。如上圖所示主線程在執行代碼的時候，遇到異步任務進入并注冊回調函數，有了運行結果后將它添加到事件隊列中，然后繼續執行下面的代碼，直到同步代碼執行完。我們知道，JavaScript作為瀏覽器的腳本語言，起初是為了與用戶交互和操作DOM，為了避免因為同時操作了同一DOM節點而引起沖突，被設計成為一種單線程語言。而單線程語言最大的特性就...

nemo 2019-08-23 15:40 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

pinecone 2019-08-02 16:18 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

zorpan 2019-08-26 13:47 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

xiongzenghui 2019-08-30 10:54 評論0 收藏0