Promise란? JavaScript에서 비동기 작업의 결과를 다루는 방법 쉽게 이해하기
Promise는 미래에 완료될 비동기 작업의 성공·실패를 표현하는 JavaScript 객체입니다. Pending·then·catch·finally·fetch·Promise.all·Race Condition·async/await까지 초보 기준으로 정리합니다.
음식 주문표처럼 미래의 결과
서버 요청처럼 당장 결과가 없는 작업의 성공·실패를 다루는 JavaScript 객체가 Promise입니다. 상태는 Pending(처리 중) → Fulfilled(성공·resolve) 또는 Rejected(실패·reject)입니다. 한 번 결정되면 보통 다시 바뀌지 않습니다. .then()은 성공 후속, .catch()는 실패, .finally()는 성공·실패 공통 정리(로딩 종료 등)입니다.
Pending → Fulfilled → then()
→ Rejected → catch()
→ finally()
fetch · Chain · 오류
fetch()는 데이터가 아니라 Promise를 반환합니다. 첫 .then은 Response, response.json()도 Promise라 다시 이어집니다. Chain에서 return으로 다음 Promise를 넘기지 않으면 완료를 기다리지 않을 수 있습니다. HTTP 404·500이어도 네트워크만 되면 fetch가 곧바로 Reject되지 않을 수 있어 response.ok를 확인합니다 — Promise Rejection과 HTTP 500은 다른 축입니다. Callback Hell보다 Chain이 읽기 쉽지만, Promise는 Callback을 없애는 것이 아니라 상태·오류·연결을 규칙화합니다. Unhandled Rejection은 처리하고, 사용자에게는 친절한 메시지를 · 세부 오류는 에러 트래킹에 남깁니다.
all · 취소 · 성능 · Microtask
Promise.all은 모두 성공해야 성공, allSettled는 각각 결과, race는 먼저 결정, any는 먼저 성공입니다. 네트워크는 겹칠 수 있어도 CPU 자동 병렬화는 아닙니다. 독립 요청을 불필요하게 순차 await하면 Request Waterfall이 되고, 반대로 무제한 동시 요청은 서버 부하입니다 — 동시성·Concurrency Limit으로 조절합니다. Promise 「무시」≠ 네트워크 취소 — AbortController가 필요합니다. 응답 순서가 요청 순서와 다르면 Race Condition이 납니다. 완료 후속은 Microtask·이벤트 루프로 실행되며, then 안 무거운 계산은 Long Task가 됩니다. Timeout·Retry·Backoff는 Promise와 별 개념입니다. Chain이 길면 async/await가 읽기 쉽지만 Promise 대체물이 아니라 문법입니다.
fetch → Pending → Fulfilled/Rejected → then/catch (Microtask) → finally Promise ≠ CPU 병렬 · HTTP ok 별도 확인
자주 묻는 질문
Promise란?
지금 결과를 알 수 없는 비동기 작업이 나중에 성공·실패했을 때 그 결과를 다루게 해주는 JavaScript 객체입니다.
상태는?
Pending → Fulfilled(성공) 또는 Rejected(실패)입니다.
then / catch / finally?
성공 후속 · 실패 처리 · 성공·실패 공통 마지막 작업입니다.
Promise면 CPU가 백그라운드인가요?
아닙니다. 결과 관리 구조이며 무거운 계산은 메인 스레드를 막을 수 있습니다.
Promise.all이란?
여러 Promise를 함께 시작하고 모두 성공할 때까지 기다린 뒤 결과를 한 번에 처리합니다.
async/await와 차이는?
Promise는 기본 객체이고 async/await는 Promise를 읽기 쉽게 쓰는 문법입니다.
정리
Promise는 미래에 완료될 비동기 작업의 성공·실패를 표현·처리하는 객체입니다. Pending → then 또는 catch → finally로 기억하면 됩니다. 후속은 Microtask로 실행되며 서버 지연과 브라우저 바쁨을 구분해야 합니다. Chain이 길어지면 async/await로 동기 코드처럼 읽을 수 있습니다. await를 써도 JavaScript 전체가 멈추지 않는 이유와 순차·동시 설계까지 이어 보면 현대 비동기 처리가 더 쉬워집니다.