Promise all vs for await

👨‍💻 비동기? 비동기의 동기화?

javascript를 배우다보면 비동기를 접하게 되는데, 이때 promise라는 object를 접하게 된다.

promise를 사용하다보면 복잡하다는 것을 알게되고, promise 객체를 개선하기 위해 async/await을 배우게 된다.

그렇다면 async/await가 항상 좋은 방식일까?

 

👉 비동기에는 순서가 보장되어야 하는 비동기가 있고, 순서의 보장이 필요없는 비동기가 있다.

다음과 같은 상황을 보자

비동기 작업 A,B,C가 있다.
A는 1초
B는 3초
C는 2초가 걸릴 때, 어떻게 처리해야할까?

만약 해당 비동기 작업이 순서가 보장가 되어야 하는 경우 다음과 같이 프로세스 진행 과정을 나타낼 수 있다.

 

초  -----1-----2-----3-----4-----5-----6
    =====O                               A
          =================O             B
                            ===========O C

✔️ 순서가 보장되어야 하는 비동기 작업 경우 6초가 걸린다.

만약 해당 비동기 작업이 순서가 보장가 되지 않아도 되는 경우가 다음과 같이 프로세스 진행 과정을 나타낼 수 있다.

 

초  -----1-----2-----3
    =====O             A
    =================O B
    ===========O       C

✔️ 순서가 보장되지 않아도 되는 비동기 작업 경우 3초가 걸린다.

 

비동기 지연 - Promise

실제로 예제를 만들어 보기 위해 비동기 효과를 내는 timer 함수를 만들어보자.

async function timer(ms) {
  await new Promise((r) => setTimeOut(r, ms));
  console.log(`time : ${ms}`);
}

이 함수를 통해 우리는 어떤 비동기 API를 호출 했을 때 API의 처리 시간을 ms로 받아내어 수행시간을 정의할 수 있다.

promise.all과 for-await

이제 위의 함수를 이용하여 promise.all와 for-await을 동작시켜보자.

const arr = [1000, 3000, 2000];
await Promise.all(arr.map(async (ms) => await timer(ms)));

time: 1000;
time: 2000;
time: 3000;

 

const arr = [1000, 3000, 2000];
for (let i = 0; i < arr.length; i++) {
  await timer(arr[i]);
}

time: 1000;
time: 3000;
time: 2000;

 

결과를 보면 위 두 결과가 다름을 알 수 있다.
즉, promise.all을 이용하면 순서를 보장하지 않은 채로 비동기를 진행하였고, async/await를 이용하면 순서를 보장하며 비동기를 진행하였다.

 

따라서 특정 비동기 작업이 순서를 보장하지 않아도 된다면 굳이 async/await를 통해 시간을 낭비시키지 말고 promise.all을 쓰는 방식을 이용해보자.