Promise.all()

Promise.all() 메서드는 주어진 모든 프로미스가 이행한 후 이행하는 프로미스를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거절합니다. 프로미스를 제공하지 않았으면 즉시 이행합니다.

The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

구문

Promise.all(iterable);

매개변수

iterable

Array 또는 String과 같이 순회 가능한 객체.

반환 값

• 인자가 없으면 이미 이행한 Promise.
• 인자에 프로미스가 없으면, 비동기적으로 이행하는 Promise. 단, 구글 크롬 58은 이미 이행한 프로미스를 반환합니다.
• 다른 모든 경우, 대기 중인 Promise. 결과로 반환하는 프로미스는 인자의 모든 프로미스가 이행하거나 어떤 프로미스가 거부할 때, (스택이 비는 시점에) 비동기적으로 이행/거부합니다. "동기적/비동기적 Promise.all" 예제를 참고하세요. 반환하는 프로미스의 이행 값은 인자로 넘어온 프로미스의 순서와 일치하며 완료 순서에 영향을 받지 않습니다.

설명

Promise.all()은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있습니다.

이행

반환하는 프로미스의 이행 값은 인자로 받은 값이 프로미스라면 이행 결과를, 프로미스가 아니라면 그대로 배열에 순서대로 담은 값입니다.

• 순회할 수 있지만 빈 객체를 전달한 경우, (동기적으로) 이미 이행한 프로미스를 반환합니다.
• 주어진 인자에 프로미스가 하나도 없으면 즉시, 있으면 모두 이행한 후에 비동기적으로 이행하는 프로미스를 반환합니다.

거부

주어진 프로미스 중 하나라도 거부하면, 다른 프로미스의 이행/거부 여부에 상관 없이 첫 번째 거부 이유를 사용해 같이 거부합니다.

예제

Promise.all() 사용하기

Promise.all()은 배열 내 모든 값의 이행, 또는 첫 번째 거부를 기다립니다.

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 100);
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

순회 가능한 객체에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.

// 매개변수 배열이 빈 것과 동일하게 취급하므로 이행함
var p = Promise.all([1,2,3]);
// 444로 이행하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 이행함
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
// 555로 거부하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 거부함
var p3 = Promise.all([1,2,3, Promise.reject(555)]);

// setTimeout()을 사용해 콘솔 출력을 스택이 빈 후에 실행할 수 있음
setTimeout(function() {
    console.log(p);
    console.log(p2);
    console.log(p3);
});

// 출력
// Promise { <state>: "fulfilled", <value>: Array[3] }
// Promise { <state>: "fulfilled", <value>: Array[4] }
// Promise { <state>: "rejected", <reason>: 555 }

동기적/비동기적 Promise.all

다음 예제는 Promise.all의 비동기성(주어진 인자가 빈 경우엔 동시성)을 보입니다.

// we are passing as argument an array of promises that are already resolved,
// to trigger Promise.all as soon as possible
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];

var p = Promise.all(resolvedPromisesArray);
// immediately logging the value of p
console.log(p);

// using setTimeout we can execute code after the stack is empty
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p);
});

// logs, in order:
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

Promise.all()이 거부하는 경우에도 동일한 일이 발생합니다:

var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
var p = Promise.all(mixedPromisesArray);
console.log(p);
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p);
});

// logs
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "rejected", <reason>: 44 }

그러나, Promise.all()은 iterable이 오직 비어있는 경우에만 동기적으로 해결됩니다.

var p = Promise.all([]); // will be immediately resolved
var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
console.log(p);
console.log(p2)
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p2);
});

// logs
// Promise { <state>: "fulfilled", <value>: Array[0] }
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

Promise.all 실패-우선 연산

Promise.all 은 배열 내 요소 중 어느 하나라도 거절(reject)하면 즉시 거절합니다. 즉 Promise.all 은 빠르게 실패합니다: 만약 timeout 이후 결정(resolve)하는 4개의 Promise를 가지고 있고, 그 중 하나가 거절(reject)하면 Promise.all 은 즉시 거절합니다.

var p1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('one'), 1000); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('two'), 2000); 
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('three'), 3000);
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('four'), 4000);
});
var p5 = new Promise((resolve, reject) => {
  reject(new Error('reject'));
});


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

//From console: 
//"reject"

가능한 rejection을 처리하여, 이 동작을 변경할 수 있습니다:

var p1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('p1_delayed_resolvement'), 1000); 
}); 

var p2 = new Promise((resolve, reject) => {
  reject(new Error('p2_immediate_rejection'));
});

Promise.all([
  p1.catch(error => { return error }),
  p2.catch(error => { return error }),
]).then(values => { 
  console.log(values[0]) // "p1_delayed_resolvement"
  console.log(values[1]) // "Error: p2_immediate_rejection"
})

명세

브라우저 호환성

To contribute to this compatibility data, please write a pull request against this repository: https://github.com/mdn/browser-compat-data.

같이 보기

• Promise
• Promise.race()