현록 | Promise 다루기 (feat. 병렬실행, 순차실행)

Promise 다루기 (feat. 병렬실행, 순차실행)

javascript · 2021년 4월 25일 · 11 min read

안녕하세요.
오늘은 Promise를 통해 구문을 동기 처리 할 때, 여러 Promise들을 다루는 법을 소개해보겠습니다.

들어가며

Javscript를 작성하다 보면, 가끔 여러 Promise들을 다룰 때가 있습니다.
필자도 Nodejs 서버에서 동시에 여러 쿼리를 실행할 때 자주 마주쳤었는데요.
오늘은 어떻게 하면 Promise들을 유연하게 다룰 수 있는지 알아보겠습니다.

시작하기

const promise1 = Promise.resolve(1)
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 5000))
const promise3 = Promise.resolve(3)
const promise4 = Promise.reject(4)

const promises = [promise1, promise2, promise3, promise4]

시작하기 앞서, 네 가지 Promise를 선언하고, 그들을 하나의 Array에 묶어보겠습니다.
구성은 즉시 resolve되는 Promise 두 개, 5000ms 후 resolve되는 Promise 하나, 즉시 reject되는 Promise 하나로 하였습니다.

Promise를 다뤄보자

우선 주어진 4개의 Promise를 동시에 병렬처리하는 방법을 알아보겠습니다.
여기엔 두 가지 방법이 있는데, 첫번째는 Promise.all, 두번째는 Promise.allSettled입니다.

1. Promise.all

Promise.all을 사용할 경우에는 하나의 Promise라도 reject되면 error를 발생시킵니다.
하지만 reject된 Promise 이외의 Promise들은 정상적으로 작동한다는 점을 유의하시길 바랍니다.

const app = async () => {
  let result

  try {
    result = await Promise.all(promises)
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    error occurred
    undefined
*/

2. Promise.allSettled

Promise.allSettled는 모든 Promise를 병렬처리한다는 점에서 Promise.all과 비슷합니다.
하지만 한가지 다른 점이 있다면, Promise들 중 하나가 reject되더라도 error를 발생시키지 않고 구문을 이어나간다는 것입니다.
또한 return 값을 통해 각각 Promise들의 결과를 알 수 있습니다.

const app = async () => {
  let result

  try {
    result = await Promise.allSettled(promises)
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    [
      { status: 'fulfilled', value: 1 },
      { status: 'fulfilled', value: 2 },
      { status: 'fulfilled', value: 3 },
      { status: 'rejected', reason: 4 }
    ]
*/

한가지 주의할 점은 nodejs 버전에 따라 Promise.all은 지원하되, Promise.allSettled는 지원하지 않을 수 있으니
유의하시길 바랍니다.

필자 또한 nodejs에서 오류가 계속 발생하여 ... 삽질한 적이 있습니다.

3. Array.prototype.reduce

이번에는 Promise들을 순차처리하는 법입니다.
여기에서는 Promise들을 묶어둔 Array의 reduce를 사용할 건데요.

꽤 유용한 방법입니다.

const app = async () => {
  let result

  try {
    result = await promises.reduce((prev, current) => prev.then(() => current), Promise.resolve())
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    error occurred
    undefined
*/