[ES6+] Promises.all()

promise.all()

주어진 모든 프로미스를 실행한 후 진행되는 하나의 프로미스를 반환한다

const p1 = new Promise(resolve =>{
  setTimeout(resolve, 5000, "First");
});

const p2 = new Promise(resolve =>{
  setTimeout(resolve, 1000, "Second");
});

const p3 = new Promise(resolve =>{
  setTimeout(resolve, 3000, "Third");
});

예를들어 3개의 api를 불러와야한다고 생각해보자(위 코드처럼)

그럼 3개의 값을 받아와야하는건데, 그때마다 promise.then() 을 써주기보다는 promise.all() 을 써주면 더 깔끔하다

promise.all() 은 한개의 리턴값으로 돌려주는데,

모든 프로미스가 전부 resolve되고 나면 마지막 프로미스를 리턴값으로 되돌려준다

const p1 = new Promise(resolve =>{
  setTimeout(resolve, 5000, "First");
});

const p2 = new Promise(resolve =>{
  setTimeout(resolve, 1000, "Second");
});

const p3 = new Promise(resolve =>{
  setTimeout(resolve, 3000, "Third");
});

const motherPromise = Promise.all([p1, p2, p3]);
motherPromise.then(values => console.log(values));
//["First","Second","Third"];

promise.all은 다른 프로미스들이 다 진행될때까지 기다린다.

또한 언제끝나는지 끝나는 시간에 맞춰 정렬되는것이 아니라, 내가 설정한 순서에 맞춰 정렬된다

(위 코드도 상식적으로 생각해보면 p1이 가장 늦게 떠야함)

만약 reject가 들어있으면 어떨까?

const p1 = new Promise(resolve =>{
  setTimeout(resolve, 5000, "First");
});

const p2 = new Promise(resolve,reject =>{
  setTimeout(reject, 1000, "Noooo");
});

const p3 = new Promise(resolve =>{
  setTimeout(resolve, 3000, "Third");
});

const motherPromise = Promise.all([p1, p2, p3]);
motherPromise.then(values => console.log(values));
//Uncaught (in promise) Noooo

Promise.all() 을 실행하려면 모든 프로미스들이 필요한데, 그중 하나라도 reject되면 promise.all도 reject된다

const motherPromise = Promise.all([p1, p2, p3]);
motherPromise
.then(values => console.log(values))
.catch(err => console.log(err));
//Noooo

motherPromise에만 catch를 붙이면 p2에 따로 catch를 붙이지 않아도 된다

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

promise.all()

Share this post