자바스크립트 then(), catch(), finally() 쉽게 배우기

자바스크립트 Promise 쉽게 배우기: then(), catch(), finally()

✔ Promise란?

자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체입니다. 비동기란 쉽게 말해 "지금 바로 결과가 나오는 게 아니라 나중에 결과가 나오는 작업"을 말합니다.

✔ Promise 기본 구조

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("성공!");
  } else {
    reject("실패!");
  }
});

✔ then() - 성공했을 때 실행

promise.then(result => {
  console.log("성공 결과:", result);
});

✔ catch() - 실패했을 때 실행

promise.catch(error => {
  console.error("에러 발생:", error);
});

✔ finally() - 성공/실패 상관없이 실행

promise.finally(() => {
  console.log("작업 완료!");
});

✔ 실전 예제 - 버튼 클릭 시 Promise 실행

버튼을 눌렀을 때 1초 후 성공/실패를 랜덤하게 보여주는 예제입니다.

<button onclick="runAsync()">비동기 작업 실행</button>

<script>
function runAsync() {
  new Promise((resolve, reject) => {
    const success = Math.random() > 0.5;
    setTimeout(() => {
      if (success) resolve("서버 응답 성공!");
      else reject("서버 에러 발생!");
    }, 1000);
  })
  .then(msg => alert("✅ " + msg))
  .catch(err => alert("❌ " + err))
  .finally(() => console.log("작업 완료"));
}
</script>

📌 요약

• then() → 성공했을 때 실행
• catch() → 실패했을 때 실행
• finally() → 성공/실패 상관없이 항상 실행