[JavaScript] Promise.all()

개요

여러 Promise들을 병렬로 처리하고, 결괏값을 배열로 받아 처리합니다.

---

 

Promise.all()

promise들이 있는 배열을 수행하는 내장함수입니다.

const allPromise = Promise.all([promise1, promise2, ...]);

 

then으로 결과 받기

allPromise.then(values => {
  values; // [valueOfPromise1, valueOfPromise2, ...]
}).catch(error => {
  error;  // rejectReason of any first rejected promise
});

 

async/awiat로 결과 받기

try {
  const values = await allPromise;
  values; // [valueOfPromise1, valueOfPromise2, ...]
} catch (error) {
  error;  // rejectReason of any first rejected promise
}

 

Promise.all()에서 유심히 봐야 할 점은, resolve와 reject 될 때입니다.

 

만약에 모든 promise들이 resolved가 성공 한 경우, allPromise는 각각의 promise가 반환한 결과를 배열로 전달해 줍니다.

이때 promise의 결괏값들을 반환해 준 배열의 순서가 중요합니다.

모든 promise가 resolved 되었을 때

 

모든 promise 중 하나라도 reject 되었을 때

모든 promise 중 하나의 promise라도 거부되면, allPromise는 다른 promise를 기다리지도 않고 즉시 reject 합니다.

Promise.all()을 사용하여 여러 비동기 작업을 수행하는 방법을 알아봅시다.

 

---

예시: 모든 Promise가 resolved인 경우

Promise.all()의 동작을 알기 위해 resolveTimeout(value, delay)와 rejectTimeout(reason, delay)를 사용합니다.

function resolveTimeout(value, delay) {
  return new Promise(
    resolve => setTimeout(() => resolve(value), delay)
  );
}

function rejectTimeout(reason, delay) {
  return new Promise(
    (r, reject) => setTimeout(() => reject(reason), delay)
  );
}

 

resolveTimeout은 지연시간이 지나면 값을 promise를 반환합니다.

rejectTimeout은 지연시간이 지나면 reject 사유를 promise를 반환합니다.

식료품점 비동기 요청 예제

const allPromise = Promise.all([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  resolveTimeout(['oranges', 'apples'], 1000)
]);

// wait...
const lists = await allPromise;

// after 1 second
console.log(lists); 
// [['potatoes', 'tomatoes'], ['oranges', 'apples']]

 

const allPromise = Promise.all([..])은 새로운 promise인 allPromise를 반환합니다.

그런 다음 const list = await allPromise는 두 개의 promise가 정상적으로 동작하고 결괏값이 반환될 때까지 1초를 기다립니다.

최종적으로 [['potatoes', 'tomatoes'], ['oranges', 'apples']]라는 결과를 반환받았습니다.

 

Promise.all의 Input과 Output의 결과를 본다면, 요청한 Array 순서대로 결괏값 또한 순차적으로 Array에 담겨 반환됨을 알 수 있습니다.

---

예시: 모든 Promise 중 하나가 reject인 경우

const allPromise = Promise.all([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);

try {
  // wait...
  const lists = await allPromise;
} catch (error) {
  // after 1 second
  console.log(error.message); // 'Out of fruits!'
}

 

new Error() 함수를 통해, reject 되는 경우 핸들링이 가능합니다.

해당 코드에서 allPromise = Promise.all([..])은 이전 코드와 동일하게 promise를 반환합니다.

 

그러나, 1초가 지난 후 new Error() 오류 함수로 인해 reject 됩니다.

allPromise가 동일한 new Error('Out of fruit!')와 함께 reject 되도록 합니다.

 

첫 번째 promise가 이행이 되었더라도 Promise.all()은 이를 고려하지 않습니다.

 

위와 같은 Promise.all()의 동작을 fail-fast라고 합니다. Promise 배열에서 한 개 이상의 reject가 생긴다면, 이와 같이 동작합니다.

---

정리

Promise.all()은 fail-fast 전략을 사용하여 비동기 작업을 병렬로 실행하고 결과를 배열로 반환하는 유용한 내장함수다.

---

참고 링크

How to Use Promise.all()