[JavaScript] 프로미스 API (Promise.all/Promise.race)

Promise.all

여러개의 프로미스를 동시에 실행시키고 모든 프로미스가 완료된 후 데이터를 처리할 때 사용한다.

사용법

let promise = Promise.all([...promises...]);

Promise.all([

new Promise((resolve) => setTimeout(() => resolve(1), 3000)),

new Promise((resolve) => setTimeout(() => resolve(2), 2000)),

new Promise((resolve) => setTimeout(() => resolve(3), 1000)),

]).then(console.log); // 프라미스 전체가 처리되면 [1, 2, 3]이 반환된다. 각각의 프라미스는 배열 구성 요소가 된다.

배열안에 작성한 프로미스가 모두 처리된 후 새로운 프로미스가 이행되며

배열안에 작성한 프로미스의 결과 값들을 담은 배열이 새로운 프로미스로 반환된다.

Promise.all은 특이한점이 있는데 위 예시에서 볼 수 있듯이 Promise.all의 배열안에 작성한 프로미스들은 처리되는 순서와는 상관없이 작성한 순서대로 값을 반환한다. 

Promise.all은 아래와 같이도 사용될 수 있다.

let urls = [

"https://api.test1.com/users/lee",

"https://api.test2.com/users/kim",

"https://api.test3.com/users/park",

];

// fetch를 사용하여 url을 프라미스로 매핑한다.

let requests = urls.map((url) => fetch(url));

console.log(requests); // [Promise, Promise, Promise]

// Promise.all은 모든 작업이 이행될 때까지 기다린다.

Promise.all(requests) //

.then((responses) =>

responses.forEach((response) =>

alert(`${response.url}: ${response.status}`)

)

);

위 코드에서 response로 전달되는 값은 Promise.all 의 반환값이며 프로미스 배열이다.

Promise.all을 사용하며 주의할 점은 Promise.all에 전달되는 프로미스 중 하나라도 reject 되면 Promise.all이 반환하는 프로미스는 에러를 반환하며 rejected 된다는 점이다.

Promise.race

Promise.all 과 비슷한데 차이점은 가장 먼저 처리되는 프로미스의 결과(성공 또는 에러)를 반환한다.

사용법

let promise = Promise.race(iterable);

Promise.race([

new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),

new Promise((resolve, reject) => setTimeout(() => resolve(2), 2000)),

new Promise((resolve, reject) => setTimeout(() => reject(3), 3000)),

]).then(console.log); // 1

가장 먼저 1초만에 끝난 첫번째 프로미스가 반환된다. 첫번째로 끝난 프로미스가 반환된 이후 다른 프로미스들(성공,에러) 모두 무시된다.