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

roberto·2022년 3월 19일

회사에서 프로젝트를 하다 비동기 처리 관련하여 문제에 직면했다
문제상황은 아래와같다

문제상황

몸이란 것을 만들어야하고
몸을 만들기 위해선 하위에 팔,다리 를 만들고 만든 팔다리를 연결해야한다

비동기적 처리이기 떄문에 아래와 같이 함수 구조를 잡았다

그런데 문제가 생긴다

위와같이 코드를 작성하면

몸통생성을하고 팔을 몸에 연결한 이후에

다리를생성 하는 작업을 처리한다

사실, 몸통이 만들어지고 나면

팔생성과 다리생성은 동시에 시작해도 상관이없다

👇 원하는 결과를 도식화 하면 아래와같다

이제 저 2번에 해당하는 두녀석을 동시에 병렬로 처리해야하는데
아주 알맞은 녀석이있다

순서가 무관한 비동기 처리를 병렬로 시작하고 싶을때 사용한다

사용방법

promise 로 구성된 인자를 배열로 받는다 , 배열안에 있는 인자들은 병렬로 실행된다

1.몸통생성을하고
2.생성된 몸통id를 팔생성연결 , 다리생성연결 하는 함수에 전달한다

배열에 있는 id 값으로 dispatch 보내는 로직을
foreach 문을 돌려서 await 하면 에러가난다

하지만 foreach 문을 -> for...of 문으로 바꾸면 신기하게 에러가나지않는다


에러❌
id배열.forEach(v=>{
          await dispatch(...)
     }

성공⭕
for (const v of id배열) {
       await dispatch(...)
  }

medium 으로 이전했습니다