[JS] Promise 프로미스 병렬처리 메서드 톺아보기

TL;DR

---

💡 처리(settled) 상태는 이행(fulfilled) 또는 거절(rejected) 상태를 모두 포함한다.

 

• Promise.all : 모든 프로미스가 이행되어야만 처리 결과를 배열로 반환한다. 프로미스가 하나라도 거절되면 전체가 거절된다.
• Promise.allSettled : 모든 프로미스가 처리(이행 또는 거절)될 때까지 기다린 후 결과를 배열로 반환한다.
• Promise.race : 가장 먼저 처리(이행 혹은 거절) 상태가 된 프로미스 처리를 반환한다.
• Promise.any : 프로미스 중 하나라도 이행되면 해당 값을 반환한다. 모든 프로미스가 거절되면 거절 이유를 담은 AggregateError를 반환한다. 

 

Promise.all

---

💡 프로미스 후속 처리 메서드를 이용한 체이닝은 순차적 처리, Promise.all은 병렬(동시) 처리 차이점 기억. Promise.all은 마지막 이행(fulfilled) 상태가 된 프로미스의 처리 시간보다 조금 더 길다.

 

기본 사용법

Promise.all 메서드는 여러 개의 비동기 처리를 병렬로 처리할 수 있다. 여러 개의 프로미스를 동시에 실행시키고, 모든 프로미스가 fulfilled(이행) 상태가 된 후 작업을 처리 해야할 때 사용한다.

 

Promise.all 메서드는 처리 순서를 보장하며, 전달받은 프로미스가 1개라도 rejected 상태가 되면 나머지 프로미스가 이행 상태가 되는 것을 기다리지 않고 즉시 종료하는 특징이 있다.

// Promise.all 기본 구문
const promise = Promise.all([promise1, promise2, ...]);

// then 대신 Promise.all 앞에 await 키워드 붙여서 결과값을 results 변수에 저장
const results = await Promise.all([promise1, promise2, ...]); // [...]
const [res1, res2] = await Promise.all([promise1, promise2, ...]); // [...]

 

Promise.all 메서드는 프로미스를 요소로 갖는 이터러블(배열, 문자열 등)을 인자로 받는다. 인자로 전달받은 이터러블의 요소가 프로미스가 아니면, 암묵적으로 Promise.resolve 메서드를 이용해 프로미스로 래핑한다.

Promise.all([
  1, // Promise.resolve(1) 와 동일
  2, // Promise.resolve(2) 와 동일
]).then(console.log); // [1, 2]

 

Promise.all은 인자로 전달받은 배열의 모든 프로미스가 fulfilled 상태가 되면 종료된다. 모든 프로미스가 fullfilled 상태가 되면 resolved된 처리 결과를 배열에 저장하여 새로운 프로미스를 반환한다. Promise.all은 처리 순서를 보장하는 특징이 있다. 즉, 처리 결과 배열은 항상 Promise.all 인자에 전달한 순서와 같다. 예를들어 첫번째 프로미스가 가장 늦게 fulfilled 됐어도 처리 결과 배열엔 항상 첫번째 요소에 위치한다.

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(1), 5000)), // 3번째 이행
  new Promise((resolve) => setTimeout(() => resolve(2), 3000)), // 2번째 이행
  new Promise((resolve) => setTimeout(() => resolve(3), 1000)), // 1번째 이행
]).then(console.log); // 모든 프로미스가 처리되면 [1, 2, 3] 출력

 

Promise.all이 인자로 받은 프로미스가 하나라도 rejected 상태가 되면 나머지 프로미스가 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료한다. 즉, 1개 프로미스가 거절되면 Promise.all 전체가 거절되고 이행된 프로미스 결과도 무시된다. 이때 가장 먼저 거절된 프로미스의 에러가 catch 메서드로 전달되며, Promise.all 전체의 결과가 된다.

 

에러 발생으로 전체 Promise.all이 종료되는 상황 ▼

Promise.all([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러 2')), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
  .then(console.log) // 건너뜀
  .catch(console.error); // Error: 에러 2 (에러 발생했으므로 Promise.all 종료)

 

여러 에러가 발생하는 상황 ▼

Promise.all([
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 1')), 5000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 2')), 3000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 3')), 1000)),
])
  .then(console.log) // 건너뜀
  .catch(console.error); // Error: 에러 3 (가장 먼저 에러가 발생한 프로미스)

 

활용 예시 ⭐️

여러 작업을 프로미스로 구성된 배열로 만든 후 Promise.all을 이용해 병렬 처리하는 예시

 

map 같은 배열 메서드 콜백에 async, await 키워드를 사용해도 여전히 프로미스를 반환한다. 배열 메서드는 각 요소를 순회하며 콜백을 호출하고 종료 여부와 상관없이 다음 콜백을 실행시키기 때문이다. 즉, 콜백 함수 자체는 동기로 작동하지만 각 콜백은 비동기로 실행시킨다.

 

잘못된 예시 ❌

const baseUrl = 'https://api.github.com/users';
const urls = [`${baseUrl}/iliakan`, `${baseUrl}/remy`, `${baseUrl}/jeresig`];

// requests -> [Promise, Promise, Promise]
const requests = urls.map(async (url) => await fetch(url));

 

올바른 예시 ✅

const baseUrl = 'https://api.github.com/users';
const urls = [`${baseUrl}/iliakan`, `${baseUrl}/remy`, `${baseUrl}/jeresig`];

// fetch API를 이용해 url을 프로미스로 매핑
// fetch API는 HTTP 응답을 나타내는 Response 객체를 래핑한 프로미스를 반환한다
// requests -> [Promise, Promise, Promise]
const requests = urls.map(url => fetch(url));

// Promise.all은 모든 작업이 이행될 때까지 기다린 후,
// 각 요소의 프로미스 처리 결과를 배열에 저장해 새로운 프로미스를 반환한다
Promise.all(requests)
  // 모든 응답이 성공적으로 이행되면 then 메서드의 콜백 함수를 호출하고,
  // 콜백 함수의 인자엔 프로미스 처리 처리 결과(배열)를 전달한다
  .then(responses => // [Response, Response, Response]
    responses.forEach(response => // Response {type: 'cors', url: '...', status: 200, ...}
      console.log(`${response.url}: ${response.status}`),
    ),
  );

 

GitHub 유저 네임이 담긴 배열을 이용해 사용자 정보를 가져오는 예시 ▼

const baseUrl = 'https://api.github.com/users';
const names = ['iliakan', 'remy', 'jeresig'];

// fetch API는 HTTP 응답을 나타내는 Response 객체를 래핑한 프로미스를 반환한다
// requests -> [Promise, Promise, Promise]
const requests = names.map((name) => fetch(`${baseUrl}/${name}`));

// Promise.all은 모든 작업이 이행될 때까지 기다린 후
// 각 요소의 프로미스 처리 결과를 배열에 저장해 새로운 프로미스를 반환한다
Promise.all(requests)
  // 모든 응답이 성공적으로 이행되면 then 메서드의 콜백 함수를 호출하고,
  // 콜백 함수의 인자엔 프로미스 처리 처리 결과(배열)를 전달한다
  .then((responses) => {
    // [Response, Response, Response]
    for (const response of responses) {
      console.log(`${response.url}: ${response.status}`);
      // 'https://api.github.com/users/iliakan: 200', ...
    }
    return responses;
  })
  // Response 객체에 있는 json() 메서드를 이용해 body 내용을 JSON 형태로 파싱한다
  .then((responses) => Promise.all(responses.map((r) => r.json())))
  // 파싱된 각 객체가 담긴 배열은 then 메서드의 콜백 함수 인자(users)로 전달된다.
  .then((users) => users.forEach((user) => console.log(user.name)));

 

아래처럼 코드를 좀 더 간소화할 수도 있다. 참고로 then 메서드는 항상 프로미스를 반환한다. then 메서드에 전달한 콜백이 프로미스가 아닌 값을 반환하면 암묵적으로 resolve 혹은 reject한 프로미스를 생성한 후 반환한다.

const baseUrl = 'https://api.github.com/users';
const names = ['iliakan', 'remy', 'jeresig'];

// 코드 평가시 then 후속 메서드 실행 -> then 메서드의 콜백 처리 결과를 resolve한 프로미스 반환
// requests -> [Promise, Promise, Promise]
const requests = names.map((n) =>
  fetch(`${baseUrl}/${n}`).then((res) => res.json()),
);
// responses -> [{ id: 349336, name: 'Ilya Kantor', ... }, {...}, {...}]
const responses = await Promise.all(requests);

 

Promise.race

---

Promise.race 메서드는 모든 프로미스가 이행(fulfilled) 상태가 되는 것을 기다리지 않고, 가장 먼저 처리된(fulfilled 혹은 rejected) 프로미스 결과를 반환한다.

Promise.race([
  new Promise((resolve) => setTimeout(() => resolve(1), 5000)), // 3번째 이행
  new Promise((resolve) => setTimeout(() => resolve(2), 3000)), // 2번째 이행
  new Promise((resolve) => setTimeout(() => resolve(3), 1000)), // 1번째 이행
]).then(console.log); // 3 (가장 먼저 "처리"된 프로미스 결과)

 

가장 먼저 처리된 프로미스의 결과가 거절(rejected)라면 거절된 프로미스의 에러를 즉시 반환한다.

Promise.race([
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 1')), 5000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 2')), 3000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 3')), 1000)),
])
  .then(console.log) // 건너뜀
  .catch(console.error); // Error: 에러 3 (가장 먼저 "처리"된 프로미스 결과)

 

에러가 발생하는 2번째 프로미스보다 3번째 프로미스가 먼저 처리(settled) 됐으므로 콘솔엔 3을 출력한다.

Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 5000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 2')), 3000)),
  new Promise(resolve => setTimeout(() => resolve(3), 1000)), // 1번째 이행
])
  .then(console.log) // 3 (가장 먼저 "처리"된 프로미스 결과)
  .catch(console.error); // 건너뜀

 

Promise.allSettled

---

Promise.allSettled 메서드는 인자로 받은 프로미스가 모두 settled 상태(fulfilled 혹은 rejected)가 되면 처리 결과를 배열로 반환한다. 즉 rejected 상태와 상관없이 모든 프로미스의 처리 결과를 받을 수 있다. 때문에 에러가 발생해도 catch 메서드는 실행되지 않는다.

Promise.allSettled([
  new Promise((resolve) => setTimeout(() => resolve(1), 5000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 2')), 3000)),
  new Promise((resolve) => setTimeout(() => resolve(3), 1000)),
])
  .then(console.log) // [{…}, {…}, {…}] (아래 주석 참고)
  .catch(console.error); // 건너뜀

/*
[
  { "status": "fulfilled", "value": 1 },
  { "status": "rejected", "reason": Error: 에러 2 at <anonymous>:3:54 },
  { "status": "fulfilled", "value": 3 }
]
*/

 

• fulfilled 상태일 때 프로퍼티 : 비동기 처리 상태 status, 처리 결과 value
• rejected 상태일 때 프로퍼티 : 비동기 처리 상태 status, 에러를 나타내는 reason

 

💡 Promise.all 메서드는 인자로 전달받은 프로미스가 1개라도 rejected 상태가 되면 나머지 프로미스가 이행 상태가 되는 것을 기다리지 않고 즉시 종료한다. 이때 이행된 다른 프로미스 결과는 무시되고, 거절된 프로미스의 에러가 Promise.all 전체의 결과가 된다.

 

Promise.any

---

Promise.any는 거절된 프로미스가 있어도 첫번째로 이행(fulfilled) 상태가 된 프로미스의 처리 결과를 반환한다. 즉, 가장 먼저 이행 상태가 된 프로미스 결과를 반환한다. 만약 ❶인자로 받은 프로미스들이 모두 거절 상태가 되거나, ❷빈 배열을 인자로 받았을 땐 에러(AggregateError)를 반환한다.

 

이행 / 거절 상태의 프로미스가 함께 있을 때 ▼

Promise.any([
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 1'))), 1000),
  new Promise((resolve) => setTimeout(() => resolve(2), 3000)), // 1번째 이행
  new Promise((resolve) => setTimeout(() => resolve(3), 5000)),
])
  .then(console.log) // 2 (가장 먼저 "이행"된 프로미스 결과)
  .catch(console.error); // 건너뜀

 

모든 프로미스가 거절 상태일 때 ▼

Promise.any([
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 1')), 5000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 2')), 3000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('에러 3')), 1000)),
])
  .then(console.log) // 건너뜀
  .catch(console.error); // AggregateError: All promises were rejected

 

빈 배열을 인자로 받았을 때 ▼

Promise.any([]).then(console.log).catch(console.error);
// AggregateError: All promises were rejected

 

💡 Promise.race vs Promise.any

• Promise.race : 이행/거절 여부와 상관없이 가장 먼저 처리된(settled) 프로미스 결과를 반환한다
• Promise.any : 거절된 프로미스가 있어도 다른 프로미스가 이행 상태가 되는 것을 기다린다. 다른 프로미스가 하나라도 이행 상태가 되면 해당 프로미스의 처리 결과를 즉시 반환한다.

 

레퍼런스

---

• 모던 자바스크립트 : Promise API - chanyeong
• Promise.all() - JavaScript | MDN
• 프라미스 API
• Promise | PoiemaWeb

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요