0Pricing
Frontend Academy · 강의

Promise: then, catch, finally, Promise.all

Promise를 생성하고 연결하며, catch 블록에서 오류를 처리하고, finally에서 정리 작업을 실행하며, Promise.all로 여러 Promise를 병렬 실행합니다.

Promise: then, catch, finally, Promise.all은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

프라미스란 무엇인가요

프라미스는 미래에 사용할 수 있게 될 값을 나타냅니다. 프라미스는 다음 세 상태 중 하나인 객체입니다. 대기 중(초기 상태), 이행됨(값과 함께 해결된 상태), 거부됨(이유와 함께 실패한 상태)입니다. 프라미스가 한 번 완료 상태가 되면 그 상태는 영구적으로 유지됩니다.

프라미스 생성하기

new Promise(executor) 생성자로 프라미스를 만듭니다. 실행 함수는 resolve와 reject 콜백을 받습니다. 성공한 값을 resolve에 전달하거나 오류를 reject에 전달해 호출하세요.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — 성공 처리

promise.then(onFulfilled)는 프라미스가 이행될 때 실행되는 콜백을 등록합니다. 이 콜백은 해결된 값을 받습니다. .then()은 새 프라미스를 반환하므로 체이닝할 수 있습니다.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — 오류 처리

promise.catch(onRejected)는 거부를 처리합니다. 체인의 끝에 배치하면 그보다 앞선 어느 단계에서 발생한 오류든 포착합니다.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — 항상 실행하기

promise.finally(onFinally)는 프라미스가 이행되든 거부되든 실행됩니다. 로딩 표시기를 숨기거나 잠금을 해제하거나 분석 정보를 기록하는 등의 정리 작업에 적합합니다.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

프라미스 체이닝 — 값 반환하기

.then()에서 값을 반환하면 다음 .then()의 해결된 값이 됩니다. 새 프라미스를 반환하면 비동기 작업을 순차적으로 연결할 수 있습니다.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — 병렬로 실행하기

Promise.all([p1, p2, p3])은 모든 프라미스가 해결될 때까지 기다린 다음 같은 순서의 결과 배열을 반환합니다. 하나라도 거부되면 전체가 즉시 거부됩니다.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — 빠른 실패 방지하기

Promise.allSettled()은 모든 프라미스가 완료 상태가 될 때까지(해결되거나 거부될 때까지) 기다린 후 {status, value} 또는 {status, reason}을 포함하는 결과 객체 배열을 반환합니다. 하나의 실패 때문에 모든 결과를 잃고 싶지 않을 때 유용합니다.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race()와 Promise.any()

Promise.race()는 가장 먼저 완료된 프라미스의 결과에 따라 해결되거나 거부됩니다. Promise.any()는 가장 먼저 이행된 프라미스로 해결됩니다(거부는 무시하며, 모두 거부된 경우에만 거부됩니다). 제한 시간과 중복 구성에 유용합니다.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

이미 완료된 프라미스 만들기

Promise.resolve(value)는 value로 이미 이행된 프라미스를 만듭니다. Promise.reject(error)는 이미 거부된 프라미스를 만듭니다. 테스트와 어댑터 함수에 유용합니다.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

처리되지 않은 거부 이벤트

프라미스가 .catch() 없이 거부되면 처리되지 않은 거부가 됩니다. 최신 브라우저와 Node.js는 경고를 표시합니다. 항상 .catch()를 연결하거나 async/await와 함께 try/catch를 사용하세요.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

빠른 확인

여러 프라미스를 병렬로 실행하고 모든 결과가 담긴 배열로 해결하는 정적 메서드는 무엇인가요?

복습: 프라미스

.then()은 성공에, .catch()는 오류에, .finally()는 정리 작업에 사용합니다. 체인은 값을 전달합니다. Promise.all()은 병렬 처리를 수행합니다. Promise.allSettled()는 일부 실패를 허용합니다. Promise.race()는 가장 빠른 결과를 얻을 때 사용합니다. 항상 거부를 처리하세요. 최신 코드는 프라미스 위에 제공되는 문법적 편의 기능인 async/await를 사용합니다.

자주 묻는 질문

“Promise: then, catch, finally, Promise.all” 강의는 무료인가요?

네 — “Promise: then, catch, finally, Promise.all” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Promise: then, catch, finally, Promise.all”에서 뭘 배우나요?

Promise를 생성하고 연결하며, catch 블록에서 오류를 처리하고, finally에서 정리 작업을 실행하며, Promise.all로 여러 Promise를 병렬 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Promise: then, catch, finally, Promise.all” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 이벤트 루프: 호출 스택, 큐, 마이크로태스크
  2. 콜백과 콜백 지옥
  3. Promise: then, catch, finally, Promise.all
  4. async/await와 오류 처리
← Frontend Academy(으)로 돌아가기