Promise는 비동기 작업의 결과를 나타내는 객체로, 콜백 헬을 해결하고 체이닝을 통한 가독성 향상을 제공합니다.
Promise는 pending, fulfilled, rejected 세 가지 상태를 가집니다.async/await는 Promise를 동기 코드처럼 작성할 수 있게 해주는 문법적 설탕입니다.Promise.all, race, allSettled, any로 여러 비동기 작업을 조합합니다.
각 Promise 메서드를 선택하고 시뮬레이션하여 동작 차이를 확인하세요.
const promise = new Promise((resolve, reject) => {
// 비동기 작업 수행
setTimeout(() => {
resolve('성공!'); // fulfilled 상태로 전이
// reject('실패!'); // rejected 상태로 전이
}, 1000);
});
promise
.then(value => console.log(value)) // '성공!'
.catch(error => console.log(error))
.finally(() => console.log('완료'));실제 코드로 동작 원리를 확인하세요.
// Promise 생성
const fetchData = () => new Promise((resolve, reject) => {
const success = true;
setTimeout(() => {
success ? resolve({ id: 1, name: 'Kim' }) : reject('Error');
}, 1000);
});
// Promise 체이닝
fetchData()
.then(data => {
console.log(data); // { id: 1, name: 'Kim' }
return data.name;
})
.then(name => {
console.log(name.toUpperCase()); // 'KIM'
})
.catch(error => {
console.error(error);
})
.finally(() => {
console.log('완료'); // 항상 실행
});pending(대기), fulfilled(이행), rejected(거부). 한 번 settled(fulfilled 또는 rejected) 상태가 되면 다시 변경되지 않습니다. 콜백 헬(callback hell)을 해결하고, 체이닝을 통한 가독성 향상과 에러 처리를 일원화합니다.Promise.all: 모든 Promise가 fulfilled되면 결과 배열 반환, 하나라도 rejected되면 즉시 reject. Promise.race: 가장 먼저 settle된 결과 반환 (성공이든 실패든). Promise.allSettled: 모든 Promise가 settle될 때까지 대기, 각각의 status와 value/reason 반환. Promise.any: 가장 먼저 fulfilled된 값 반환, 모두 rejected되면 AggregateError 발생.async/await는 Promise를 더 읽기 쉽게 사용하기 위한 문법적 설탕(syntactic sugar)입니다.async 함수는 항상 Promise를 반환하며, await는 Promise가 settle될 때까지 실행을 일시 중지합니다. try/catch로 에러 처리가 가능하여 동기 코드처럼 작성할 수 있습니다. 내부적으로는 여전히 Promise 기반으로 동작합니다.