什么是async/await

async/await 是 ECMAScript 2017 標(biāo)準(zhǔn)中新增的語法，其目的是簡化 JavaScript 中處理異步操作的方式，使代碼更加清晰易懂。在 async/await 出現(xiàn)之前，我們通常使用回調(diào)函數(shù)、Promise、Generator 等方式來處理異步操作。而 async/await 則可以讓異步代碼的編寫方式更接近于同步代碼，使得異步操作更加方便和易于維護(hù)。 async/await 是由 async 和 await 兩個關(guān)鍵字組成的語法糖。其中，async 用于聲明一個異步函數(shù)，await 用于等待一個異步操作的結(jié)果。使用 async/await 的代碼結(jié)構(gòu)更加清晰，通常比使用回調(diào)函數(shù)、Promise 等方式要簡單易懂。 例如，下面是一個使用 Promise 處理異步操作的代碼示例：

function?asyncFunc()?{
??return?new?Promise((resolve,?reject)?=>?{
????setTimeout(()?=>?{
??????resolve('hello');
????},?1000);
??});}asyncFunc().then(result?=>?{
??console.log(result);});

而使用 async/await 的代碼則更加直觀簡潔：

async?function?asyncFunc()?{
??return?new?Promise((resolve,?reject)?=>?{
????setTimeout(()?=>?{
??????resolve('hello');
????},?1000);
??});}async?function?main()?{
??const?result?=?await?asyncFunc();
??console.log(result);}main();

在上面的代碼中，我們使用 async/await 定義了一個異步函數(shù) asyncFunc，并使用 await 等待異步操作的結(jié)果。在 main 函數(shù)中，我們調(diào)用 asyncFunc，并把結(jié)果輸出到控制臺。使用 async/await 的代碼結(jié)構(gòu)更加清晰，讓我們更加容易理解異步操作的執(zhí)行流程。

在foreach中使用async/await

在 JavaScript 中，使用 async/await 可以方便地處理異步操作，而 forEach 是一個常用的數(shù)組方法，可以對數(shù)組進(jìn)行遍歷。但是，在使用 forEach 時需要注意，如果其中的操作是異步的，可能會導(dǎo)致意想不到的結(jié)果。 例如，在 forEach 中使用 async/await：

const?array?=?[1,?2,?3];array.forEach(async?(item)?=>?{
??const?result?=?await?asyncFunc(item);
??console.log(result);});

在上面的代碼中，我們使用 forEach 對數(shù)組進(jìn)行遍歷，并在遍歷的過程中調(diào)用了一個異步函數(shù) asyncFunc，然后使用 await 等待異步函數(shù)的執(zhí)行結(jié)果，并輸出結(jié)果到控制臺。 但是，當(dāng)我們運(yùn)行這段代碼時，發(fā)現(xiàn)結(jié)果并不是我們預(yù)期的那樣：

undefined
undefined
undefined

這是因?yàn)?，?forEach 中使用 async/await 時，異步操作并不會等待前一個操作結(jié)束再執(zhí)行下一個，而是會同時執(zhí)行多個異步操作，因此輸出結(jié)果是 undefined。 解決這個問題的方法是，使用 for…of 循環(huán)代替 forEach，因?yàn)?for…of 循環(huán)會等待異步操作執(zhí)行結(jié)束再進(jìn)行下一次循環(huán)。例如：

const?array?=?[1,?2,?3];for?(const?item?of?array)?{
??const?result?=?await?asyncFunc(item);
??console.log(result);}

這樣就可以保證異步操作的順序，并正確輸出結(jié)果。

結(jié)語

牽手 給你持續(xù)分享優(yōu)秀的軟件，各種科普知識，以及分享些熱門的互聯(lián)網(wǎng)資訊和福利！
歡迎訪問、關(guān)注、評論 并留下你的小心心?