for loop에서 async/await

개발을 진행하다 보면, 각 Array에 대한 item을 비동기 처리를 해야하는 경우가 생깁니다.

ES2017(ES8)의 async , await 등장으로 이전에 사용하던 callback 및 promise.then을 이용한 처리보다 더 직관적으로 비동기 처리를 할 수 있게 되었습니다.

 

async function processArray(arr){
    arr.forEach(item => {
        await func(item);
    });
}

 

이 코드는 syntax error가 발생합니다. 왜냐하면 processArray 함수는 async로 선언되었기 때문에 비동기 함수이지만 forEach내 익명 함수는 동기식이기 때문입니다.

 

for...of문 사용

const a = [1,2,3];

async function processArray(array) {
  for (const item of array) {
    await delayedLog(item);
  }
  console.log('Done!');
}

function delayedLog(item){
	console.log(item);
}

processArray(a);

// 1
// 2
// 3
// Done!

 

예상했던 결과대로 출력되었습니다. 그러나 현재 코드는 비동기 처리를 하나씩 처리하고 있습니다. 때문에 배열의 크기가 클 경우 실행 시간도 길어집니다.

 

Promise.all을 이용한 병렬 처리

위의 코드들은 1번 비동기가 끝날때까지 기다리고 2번 비동기 실행, 2번 끝나면 3번 실행으로 순차적으로 코드가 기다려집니다. 

그러나 우리는 1,2,3이 모두 실행되고 1,2,3이 끝나면 그때 코드를 흘러가게 할 때도 있습니다. 이때 Promise.all을 사용합니다.

 

Promise.all(
  array.map(async param => {
    return await axios({
      method: 'POST',
      data: data,
      url: '',
    })
  })
).then(result => {
  console.log(result);
}).catch(e => {
  console.error(e);
});

 

전에 각 비동기 처리를 위한 Promise를 반환하는 function을 map 메서드로 묶어 Promise 배열을 반환하고 이를 Promise.all을 통해서 한 번에 처리하도록 만듭니다.