Promise.all, Promise.race

여러 개의 Promise들을 가지고 와서 결과값을 리턴하고 싶을 때 사용할 수 있는 메서드들이다. 어떤 경우 사용이 가능한지 살펴보자.

function apple(){
  return new Promise(resolve => setTimeout(resolve('apple'),1000))
}

function banana(){
  return new Promise(resolve => setTimeout(resolve('banana'),1000))
}


//위 두 함수를 하나의 함수로 합하면 다음과 같다. 
function pickFruits(){
  return apple().then(apple => {
    return banana().then(banana => `${apple} + ${banana}`)
  })
}

프롬이스끼리 nesting이 일어났는데, 이를 간단하게 작성하는 것이 가독성을 올려준다. 이를 위해 async/await를 사용한다.

async function pickFruits(){
  const a = await apple();
  const b = await banana();
  return `${a} + ${b}`
}

하지만 변수 a와 b는 시간적으로 아무런 관련성이 없기 때문에 banana를 출력하기 위해 apple이 출력되기까지의 시간을 굳이 기다릴 이유가 없다. 따라서 병렬적으로 처리를 해 주는 것이 좋다.
이때 사용되는 메서드가 Promise.all이다. 이를 이용해서 코드를 정리하면 다음과 같을 것이다.

function pickFruits(){
  return Promise.all([apple(),banana()]) //배열이 리턴된다. 
  .then(fruits => fruits.join('+'))
} 
pickFruits.then(console.log)

배열의 각 요소는 비동기 작업이 잘 수행되었을 경우에 출력되는 value일 것이다.
만약에 위 2개의 프롬이스들 중 먼저 얻어지는 요소를 확인하고 싶다면 Promise.race를 사용한다.

function pickFruits(){
  return Promise.race([apple(),banana()])
} 
pickFruits.then(console.log)