Async / await로 forEach 비동기 loop 처리가 안된다?!

결론: 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
*/

문제점 :

• forEach에 await를 사용함에도 불구하고 Done! 이 먼저 로그에 나오고 그 이후에 urls.forEach의 결과들이 로그에 나온다.
• 처리시간이 더 많이 필요한 첫번째 loop이 먼저 로그에 나오지 않고 바로 두번째 loop이 로그에 나온다. Fetch를 할 때await가 있어도 첫번째 url의 응답을 기다려주지 않고 처리 된 상태가 되어버린다.

해결방안 :

for...of 사용하기

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!
*/