Promise 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다.
Promise 3가지 상태
Promise는 항상 상호 배타적인 3가지 상태 중 하나를 유지합니다:
- pending (대기): 초기 상태로, 이행되거나 거부되지 않은 상태.
- fulfilled (이행): 비동기 작업이 성공적으로 완료됨 (
resolve(value)). - rejected (거부): 비동기 작업이 오류로 실패함 (
reject(error)).
생성자 및 기본 메서드 체이닝
const loadUser = (id) => {
return new Promise((resolve, reject) => {
fetch(`/api/users/${id}`)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then((data) => resolve(data))
.catch((err) => reject(err));
});
};
loadUser(42)
.then((user) => console.log('로드 완료:', user.name))
.catch((err) => console.error('Error:', err.message))
.finally(() => console.log('요청 처리 종료'));
정적 해결 메서드
// 즉시 이행되는 Promise
const p1 = Promise.resolve('Immediate value');
// 즉시 거부되는 Promise
const p2 = Promise.reject(new Error('Immediate failure'));
Promise 조합 메서드 (Combinators)
| 메서드 | 동작 방식 | 실패 조건 |
|---|---|---|
Promise.all([p1, p2]) |
모든 Promise가 성공할 때까지 대기 | 하나라도 거부되면 즉시 중단 |
Promise.allSettled([p1, p2]) |
성공/실패 여부에 관계없이 모든 완료 대기 | 절대 거부되지 않음 |
Promise.race([p1, p2]) |
가장 먼저 완료된 Promise의 결과 채택 | 가장 먼저 완료된 Promise가 거부될 때 |
Promise.any([p1, p2]) |
가장 먼저 성공한 Promise로 이행 | 모든 Promise가 실패할 때 (AggregateError) |
// Promise.all: 여러 독립적인 요청을 병렬로 대기
const [users, posts] = await Promise.all([
fetchUsers(),
fetchPosts()
]);
// Promise.allSettled: 모든 요청의 성공/실패 상태를 안전하게 검사
const results = await Promise.allSettled([reqA(), reqB()]);
results.forEach((res) => {
if (res.status === 'fulfilled') console.log('Value:', res.value);
else console.error('Reason:', res.reason);
});
Async / Await 동일 구현
async function getUserData(id) {
try {
const res = await fetch(`/api/users/${id}`);
const data = await res.json();
return data;
} catch (err) {
console.error('Failed to retrieve user:', err);
throw err;
}
}