Promise.all()

Promise.all()
처리하고자 하는 Promise들을 배열로 담아 Promise.all에 인자로 전달하면 배열에 있는 모든 Promise들이 거의 동시에 트리거 된다.
병렬 처리 가능

예제

예시 1

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo1');
});
const promise4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo2');
});

Promise.all(
  [promise1, promise2, promise3, promise4]).then((values) => {
  console.log(values);
});
//output: Array [3, 42, "foo1","foo2"]

promise3, promise4의 결과는 각각 1초가 걸리지만 동시에 트리거 되기 때문에 2초후에 결과가 나오는 것이 아닌 1초 후에 결과가 나오게 되는 것이다.
Promise.all()을 사용할 때 주의해야할 점은 배열 내 요소 중 어느 하나라도 거부하면 즉시 거부한다는 것이다.

예시 2

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('하나'), 1000);
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('둘'), 2000);
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('셋'), 3000);
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('넷'), 4000);
});
var p5 = new Promise((resolve, reject) => {
  reject(new Error('거부'));
});

// .catch 사용:
Promise.all([p1, p2, p3, p4, p5])
.then(values => {
  console.log(values);
})
.catch(error => {
  console.log(error.message)
});

// 콘솔 출력값:
// "거부"

위의 코드에서 p5가 Error를 반환하기 때문에 p1, p2, p3, p4의 결과는 출력되지 못하게 된다.
만일 p1, p2, p3, p4의 결과를 보고 싶다면 발생할 수 있는 거부를 사전에 처리하면 된다.

예시 3

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p1_지연_이행'), 1000);
});

var p2 = new Promise((resolve, reject) => {
  reject(new Error('p2_즉시_거부'));
});

Promise.all([
  p1.catch(error => { return error }),
  p2.catch(error => { return error }),
]).then(values => {
  console.log(values[0]) // "p1_지연_이행"
  console.log(values[1]) // "Error: p2_즉시_거부"
})

위의 코드를 해석하면 p2에서 발생하는 거부를 .catch()를 이용하여 미리 처리 하였기 때문에 결과 배열에 p1의 결과와 p2의 error 내용이 담기게 된 것이다.