비동기 병렬처리( Promise.all )

비동기 처리를 위해서 Promise, Async-await등을 사용하는데

 

순차적인 처리와 병렬 처리는 구현하려는 목적에 맞게 사용하면 될 것 같다.

 

Async-await을 이용한 순차적인 처리는

"유저를 조회하고, 거기서 얻은 유저 아이디를 통해 장바구니 상품을 가져온다"와 같은 상황에 적합한 처리가 되지만

하나씩 순서대로 처리하는 만큼 절대적인 시간이 소모된다.

 

반대로 순서가 보장되지 않더라도 "일괄적으로 모든 데이터를 업데이트"를 하는 상황 같은 경우에는 Promise.all과 같은

병렬적인 처리가 적합하다. 모든 데이터가 한번에 처리되므로 시간 또한 절반 정도 절약된다!

 

1. 비동기 순차적인 처리

const sequenceFunc = async (number) => {
  return new Promise(resolve => setTimeout(() => {
    // 비동기 코드
    console.log('순차 처리 ' + number);
    resolve();
  }, 200))
}

const main = async () =>{
  console.time();
  
  for (let i = 0; i < 7; i++) {
    await sequenceFunc(i);
  }
 
  console.timeEnd(); // 'default: 1431ms'
}

main();  // 리액트 함수형 컴포넌트라면 main을 컴포넌트 함수로 사용하면 된다

 

2. 비동기 병렬 처리

const parallelFunc = async (number) => {
  return new Promise(resolve => setTimeout(() => {
    // 비동기 코드
    console.log('병렬 처리 ' + number);
    resolve();
  }, 200))
}

const main = async () => {
  console.time();
  
  const promises = [];
  for (let i = 0; i < 7; i++) {
    promises.push(parallelFunc(i));
  }
  await Promise.all(promises);
 
  console.timeEnd(); // 'default: 204ms'
}

main(); // 리액트 함수형 컴포넌트라면 main을 컴포넌트 함수로 사용하면 된다