Promise

Promise란?

• 비동기 처리를 좀 더 편리하고 가독성 좋게 다룰 수 있도록 도와주는 객체
• 미래의 결과를 약속하는 객체
• 비동기 작업의 완료 또는 실패 처리
• 네트워크 요청(fetch), 타이머(setTimeout)같은 비동기 로직에서 사용

Promise의 상태

• Pending : 대기 중 (아직 완료되지 않음)
• Fulfilled : 성공 (작업이 완료되어 결과값 반환)
• Rejected : 실패 (에러 발생)

기본 구조

const myPromise = new Promise((resolve,reject) => {
	if(성공){
	  resolve("성공 결과");
	}else{
	  reject("에러 발생");
	}
});

• resolve(value): 성공 시 호출 -> then()으로 전달
• reject(error): 실패 시 호출 -> catch()로 전달

사용 예시

myPromise
  .then(result => {
    console.log(result); // 성공: '성공 결과'
  })
  .catch(error => {
    console.error(error); // 실패: '에러 발생'
  })
  .finally(() => {
    console.log('항상 실행됨');
  });

• then() : 성공 시 실행
• catch() : 실패 시 실행
• finally() : 성공/실패 상관없이 항상 실행

장점

• 콜백 지옥 방지 -> 가독성 개선
• 비동기 작업을 체이닝(연결)하여 순차적으로 처리 가능
• async/await와 함께 쓰이면 더 직관적

예시

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 가져오기 성공!');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // '데이터 가져오기 성공!'
  .catch(error => console.error(error));

---

부가 질문

Promise.all이란?

• 여러 개의 Promise를 동시에 실행
• 모든 Promise가 성공해야 .then 실행
• 배열로 Promise들을 넣어주면 모든 Promise가 성공하면 각 결과를 배열로 돌려줌
• 하나라도 실패하면 .catch가 호출, 즉시 실패 상태로 전환
• 여러 API를 동시에 호출하고 결과를 모두 받아야 할 때
• 이미지 여러 개 업로드 같은 병렬 작업에 유용

기본 사용법

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // [promise1 결과, promise2 결과, promise3 결과]
  })
  .catch(error => {
    console.error(error); // 하나라도 실패하면 여기로!
  });

예시

• 성공

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then(results => {
    console.log(results); // [1, 2, 3]
  })
  .catch(error => {
    console.error(error);
  });

• 실패

const p1 = Promise.resolve(1);
const p2 = Promise.reject('에러 발생!');
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then(results => {
    console.log(results); // 실행 안 됨
  })
  .catch(error => {
    console.error(error); // '에러 발생!'
  });

Promise.allSettled란?

• Promise.all과 비슷하게 여러 Promise를 동시에 실행
• 하나라도 실패해도 중단되지 않고 모든 Promise의 결과 상태를 전부 반환
• 성공이든 슬패든 모든 결과를 확인하고 싶을 때 사용

상태 값 구조

[
  { status: 'fulfilled', value: 성공값 },
  { status: 'rejected', reason: 실패이유 },
  ...
]

예시

const p1 = Promise.resolve(1);
const p2 = Promise.reject('에러 발생!');
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });

• 결과

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: '에러 발생!' },
  { status: 'fulfilled', value: 3 }
]