Async Await로 프로미스보다 잘 사용하기

[SeonHyungJo]

Async Await를 사용하여 Promise.all과 같은 효과 내기

const asyncFunc = async () => {
  const start = performance.now()
  const value1 = delayCallback(() => 'value1', 2000)
  const value2 = delayCallback(() => 'value2', 1000)
  const value3 = delayCallback(() => 'value3', 3000)

  value1.then((item) => console.log(item))
  value2.then((item) => console.log(item))
  value3.then((item) => {
    console.log(item)
    console.log(performance.now() - start)
  })

  const startAll = performance.now()
  const [value4, value5, value6] = await Promise.all([delayCallback(() => 'value4', 2000), delayCallback(() => 'value5', 1000), delayCallback(() => 'value6', 3000)])
  console.log(value4)
  console.log(value5)
  console.log(value6)
  console.log(performance.now() - startAll)
}

위와 같이 수행하게 되면 위와 아래의 시간은 동일한 시간 3000ms가 걸린다는 것을 확인할 수 있다.

이와 같이 Aync Await로 표현이 가능한 이유는 Promise.all도 결국 누가 먼저 끝나고 마지막으로 끝나는지를 명확하게 알 필요가 없다는 것이다.

만약 value1, value2, valu3에서 서로 가 참조를 하여 차례대로 해야된다면 await를 사용해서 표현이 가능하다.

const asyncFunc = async () => {
  const start = performance.now()
  const value1 = await delayCallback(() => 'value1', 2000)
  const value2 = await delayCallback(() => 'value2', 1000)
  const value3 = await delayCallback(() => 'value3', 3000)

  console.log(value1)
  console.log(value2)
  console.log(value3)
  console.log(performance.now() - start)
}

그리고 순차적으로 실행하게 되면 모든 시간을 합친 6000ms에 가까운 시간이 걸리게 된다.

2번째 일을 하고 처리해야 하는 일이 생겼다.

value2를 처리하고 value2_2를 해야하는 일이 생겨버렸다. 1, 2, 3을 서로 병렬적으로 처리해서 빠르게 하려 했으나 착오가 생겼다.

이럴때 Async Await가 힘을 발휘한다.

const consoleFunc = (text) => {
    console.log(text)
  }

const asyncFunc = async () => {
  const start = performance.now()
  const value1 = delayCallback(() => 'value1', 2000)
  const value2 = delayCallback(() => 'value2', 1000)
  const value3 = delayCallback(() => 'value3', 3000)

  value1.then((item) => console.log(item))
  value3.then((item) => {
    console.log(item)
    console.log(performance.now() - start)
  })
  consoleFunc(value2) // Promise
}

1, 2, 3의 일은 서로 관련이 없는 일이다. 그러니 각각의 await를 붙이지 않았으나 2는 이제 consoleFunc를 다음에 실행시키기 위해 await를 추가한다. 이렇게 되면 value2를 참조하고 있는 consoleFunc는 2가 끝날 때까지 기다리게 되는 것이다.

const asyncFunc = async () => {
  const start = performance.now()
  const value1 = delayCallback(() => 'value1', 2000)
  const value2 = await delayCallback(() => 'value2', 1000)
  const value3 = delayCallback(() => 'value3', 3000)

  value1.then((item) => console.log(item))
  value3.then((item) => {
    console.log(item)
    console.log(performance.now() - start) // 4000ms
  })
  consoleFunc(value2)
}

이런 식으로 작성하면 이제 consoleFunc은 값이 들어가게 된다. Promise.then을 사용해서 위에서 작성할 수 있었겠지만 점점 할일이 많아지게 되면 결국 콜백 헬과 동일 해진다.

그런데 여기서 주목해야 할 것은 총 4000ms가 걸렸다는 것이다. 나는 Promise.all처럼 실행해서 제일 오래걸리는 3000ms안에 끝내고 싶은데 이럴때는 아래와 같이 순서만 바꿔보자.

const asyncFunc = async () => {
  const start = performance.now()
  const value1 = delayCallback(() => 'value1', 2000)
  const value3 = delayCallback(() => 'value3', 3000)
  const value2 = await delayCallback(() => 'value2', 1000)

  value1.then((item) => console.log(item))
  value3.then((item) => {
    console.log(item)
    console.log(performance.now() - start) //3000ms
  })
  consoleFunc(value2)
}

동기적으로 일어나야하는 부분은 마지막으로 옮겨서 연관성이 없는 비동기 작업을 위로 올리는 것이다. 이렇게 되면 첫번째로 나오는 await와 동시에 실행하게 되며 await가 걸린 부분은 끝나고 바로 다음을 실행하게 된다.

위의 내용을 Promise.all을 사용해서 구현하게 되면

const asyncFunc = async () => {
    const startAll = performance.now()
  const [value4, value5, value6] = await Promise.all([delayCallback(() => 'value4', 2000), delayCallback(() => 'value5', 1000), delayCallback(() => 'value6', 3000)])
  console.log(value4)
  console.log(value6)
  consoleFunc(value5, startAll)

  console.log(performance.now() - startAll) // 3000ms
}

시간이 동일하다 그런데 문제가 있다. value5 다음에 실행하는 consoleFunc이 Promise.all이 끝나는 3000ms 이후에 작동한다는 것이다.

위에서 작성한 Async Await에서는 value2가 끝나는 1000ms이후에 바로 실행된다는 차이점이 있다.