여러 개의 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)