[ JavaScript ] await 병목현상

exceed_96·2024년 1월 25일

목록 보기

5/18

await을 남용하면 발생하는 await 병목현상에 대해서 알아보는 포스팅이다

1. await 병목현상이란?

await병목현상은 여러 await이 연쇄적으로 발생하면 각각의 작업이 완료될 때까지 기다려야 하는 현상을 말한다.

async function example() {
  const result1 = await asyncOperation1();
  const result2 = await asyncOperation2();
  const result3 = await asyncOperation3();
}

위와같이 여러개의 await키워드를 체이닝으로 구성해놓으면 각각의 작업이 완료될때까지 기다려야 하기 때문에 전체 작업이 느려질 수 있다.

물론 뒤에 있는 작업이 앞선 작업에 의존적인 작업이라면 해당 작업을 기다리는게 맞지만 뒤에 있는 작업이 앞선 작업과는 별개의 작업, 즉 의존적인 작업이 아니라면 위 로직의 결과물은 await 병목현상 문제점에 맞닥뜨리게 된다.

병렬적으로 처리할 수 있는 작업을 즉, 서로 관련없는 작업을 동기적으로 처리하게 되면 3초 걸릴일이 9초나 걸리는 문제가 발생하기 때문에 이를 위해서 무작정 await을 쓰는게 아닌 각 await이 서로 연관이 있나, 없나를 판단하고 해당 작업을 병렬적으로 처리해야 하는지를 결정해야 한다.

2. await 병목현상 예시

const asyncOperation1 = () =>
  new Promise((resolve) => setTimeout(resolve, 1000));

const asyncOperation2 = () =>
  new Promise((resolve) => setTimeout(resolve, 1000));

const asyncOperation3 = () =>
  new Promise((resolve) => setTimeout(resolve, 1000));

async function example() {
  console.time();
  const result1 = await asyncOperation1();
  const result2 = await asyncOperation2();
  const result3 = await asyncOperation3();
  console.timeEnd();
}

example();

위 3개의 await로직은 서로 관련이 없는 로직이라고 가정해보자

서로 관련이 없는 로직이라는건 서로 의존적이지 않은 로직이므로 동기적으로 실행되어야 하는게 아닌 비동기적으로 실행되어도 괜찮다는 의미이다.

그렇다면 우리가 기대하는 해당 로직의 시간 소요값은 1초가 될 것이다.

다만 결과는 그렇지 않다.

"example"함수의 작업을 다 해결하기 위해서는 총 3초의 시간이 걸리는 걸 확인할 수 있따.

await키워드는 비동기로직을 강제적 동기로 처리해버려서 서로 의존적이지 않은 3개의 await을 순차적으로 실행하고 있기 때문이다.

그럼 해당 문제를 어떻게 해결해야 할까?

3. await 병목현상 해결법

서로 의존적이지 않은 await처리는 다른 방법을 사용해야 한다.

Promise.all

병목현상을 해결할 수 있는 Promise의 정적메서드 all이다.
all메서드는 동시처리할 때 사용하는 메서드이다.

const asyncOperation1 = () =>
  new Promise((resolve) => setTimeout(() => resolve("Result 1"), 1000));

const asyncOperation2 = () =>
  new Promise((resolve) => setTimeout(() => resolve("Result 2"), 1000));

const asyncOperation3 = () =>
  new Promise((resolve) => setTimeout(() => resolve("Result 3"), 1000));

async function example() {
  console.time();

  const [result1, result2, result3] = await Promise.all([
    asyncOperation1(),
    asyncOperation2(),
    asyncOperation3(),
  ]);

  console.timeEnd();
  console.log(result1, result2, result3);
}

example();