결론: Async/await는 Array.prototype.forEach와 사용될때 비동기 처리가 안된다.
출처: DailyJS
const urls = [
'https://lotsofinformation.com/loop/1',
'https://lessinformation.com/loop/2',
'https://lessinformation.com/loop/3'
];
async function loops() {
await urls.forEach(async (url, idx) => {
const loop = await fetch(url);
console.log(`Fetch loop ${idx+1}`);
});
console.log('Done!');
}
loops();
/* 결과:
Done!
Fetch loop 2
Fetch loop 1
Fetch loop 3
*/
await
를 사용함에도 불구하고 Done!
이 먼저 로그에 나오고 그 이후에 urls.forEach
의 결과들이 로그에 나온다.await
가 있어도 첫번째 url의 응답을 기다려주지 않고 처리 된 상태가 되어버린다.
const urls = [
'https://lotsofinformation.com/loop/1',
'https://lessinformation.com/loop/2',
'https://lessinformation.com/loop/3'
];
async function loops() {
for (const [idx, url] of urls.entries()) {
const loop = await fetch(url);
console.log(`Fetch loop ${idx+1}`);
}
console.log('Done!');
}
loops();
/* 결과:
Fetch loop 1
Fetch loop 2
Fetch loop 3
Done!
*/