[JS] Promise.all()은 병렬일까 직렬일까🤔

하나의 async function 내에서는 await 키워드를 만날 때마다
말 그대로 기다렸다가(await) 비동기처리가 완료 된 후 직렬로 다음 task를 처리한다.

만약에 async 라이브러리를 구현했던 과제 중에 each나 times 처럼
여러 비동기 task를 병렬적으로 시작시키려면 어떻게 해야할까?

만약 Promise.all 가 병렬로 동작한다면 요걸 쓰면 될 것 같다!!
그래서 한번 확인해보았다.

​

async/await 직렬처리

function nSecondsLater(n) {
  console.log(`🚩 n=${n} Start`);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`✅ ${n} Seconds Later`);
    }, n * 1000);
  });

}

const arr = [0, 1, 2, 3]


async function asyncWaterfall() {
  for (let n of arr) {
    const promise = await nSecondsLater(n);
    console.log(promise);
  }
  console.log("DONE!");
}

asyncWaterfall();

async/await : for of문을 사용하여 순회 할 경우
아래와 같이 waterfall 형태로 실행된다.

 

asyncWaterfall

​

Promise.all()을 이용한 병렬처리

function asyncParallel() {
  const promises = arr.map(n =>
    nSecondsLater(n).then(console.log)
  );
  Promise.all(promises).then(() => console.log("DONE!"));
}

asyncParallel();

위와 같이 Promise.all()을 이용하여 한번에 처리할 경우
아래와 같이 원하는 대로 병렬로 동작한다!

 

asyncParallel

​

 

추가!
+ async/await 없이 waterfall 구현하기

function asyncWaterfall2() {
  const promise = arr.reduce((accPromise, n) => {
    return accPromise.then(() => {
      return nSecondsLater(n).then(console.log);
    });
  }, Promise.resolve());
  promise.then(() => console.log("DONE!"));
}

asyncWaterfall2();

 

여전히 아직은 비동기 문법들이 익숙친 않지만 여러가지 예제코드를 자주 짜봐야겠당