자바스크립트 비동기 이해하기 - (3.1) Promise란?

 

2025.04.16 - [FE develop/Javascript] - 자바스크립트 비동기 이해하기 - (2) 비동기 콜백

자바스크립트 비동기 이해하기 - (2) 비동기 콜백

 

📦 Promise란?

자바스크립트에서 Promise(프로미스)는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. 비동기 처리를 더 직관적이고 체계적으로 다룰 수 있게 도와주는 핵심 개념 중 하나입니다.

 

✅ Promise를 상자로 비유해볼까요?

Promise는 비유하자면 처음엔 비어있는 상자입니다. 이 상자는 비동기 작업이 끝날 때, 그 결과(성공이든 실패든)로 채워지게 됩니다.

즉, 비동기 작업이 끝나기 전에는 상자가 비어 있고(pending 상태),
성공하면 결과로 채워지고(fulfilled 상태),
실패하면 에러로 채워지는(rejected 상태) 개념입니다.

---

🔍 Promise의 상태

Promise는 다음과 같은 세 가지 상태를 가집니다.

상태 (State)설명

pending	비동기 작업이 아직 완료되지 않은 상태
fulfilled	비동기 작업이 성공적으로 완료된 상태
rejected	비동기 작업이 실패한 상태

각 상태에서의 결과(Result)는 다음과 같습니다:

• pending → result는 undefined
• fulfilled → result는 비동기 작업의 반환값
• rejected → result는 에러 객체

 

🛠 Promise 객체 만들기

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const data = { name: '철수' }
        console.log("네트워크 요청 성공")
        resolve(data)
    }, 1000)
})

 

위 코드에서 new Promise()를 통해 프로미스를 생성하고, 내부의 executor 함수는 즉시 실행됩니다. 이 함수는 두 가지 콜백인 resolve(성공 시 호출)와 reject(실패 시 호출)를 인자로 받습니다.

---

🧪 예시: 성공과 실패 처리

✔ 성공 시

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const data = { name: '철수' }
        resolve(data)
    }, 1000)
})

 

❌ 실패 시

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const data = null
        if (data) {
            resolve(data)
        } else {
            reject(new Error("네트워크 문제가 발생했습니다"))
        }
    }, 1000)
})

 

📞 Promise를 함수 내부에서 만들기

비동기 작업을 특정 시점에 실행하고 싶다면, 함수 안에서 Promise 객체를 생성하면 됩니다.

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: '철수' }
            if (data) {
                resolve(data)
            } else {
                reject(new Error("네트워크 문제가 발생했습니다"))
            }
        }, 1000)
    })
}

 

 

 

📚 Promise 후처리 메서드

• .then()
  → fulfilled 상태(성공)일 때 실행할 콜백 함수를 등록합니다.
  → 콜백 함수의 매개변수에는 resolve()에서 전달한 결과값이 들어옵니다.
• .catch()
  → rejected 상태(실패)일 때 실행할 콜백 함수를 등록합니다.
  → 콜백 함수의 매개변수에는 reject()에서 전달한 에러 객체가 들어옵니다.
• .finally()
  → 성공이든 실패든 상관없이 항상 마지막에 실행할 콜백 함수를 등록합니다.
  → 이 메서드는 결과값이나 에러 객체를 전달받지는 않지만, 정리 작업에 유용하게 쓰입니다.

• Promise는 비동기 작업이 완료된 이후에 실행할 수 있는 후속 처리 메서드를 제공합니다:

 

getData()
    .then((data) => {
        console.log("받은 데이터:", data)
    })
    .catch((error) => {
        console.error("에러 발생:", error.message)
    })
    .finally(() => {
        console.log("마무리 작업 수행")
    })

 

🧾 정리

• Promise는 비동기 작업의 성공/실패 결과를 표현하는 자바스크립트 객체입니다.
• pending, fulfilled, rejected의 3가지 상태를 가집니다.
• resolve()는 성공 시 호출, reject()는 실패 시 호출합니다.
• .then(), .catch(), .finally()를 통해 후처리를 체계적으로 구성할 수 있습니다.

---

다음 포스트에서는 Promise를 더 깊이 있게 다뤄보겠습니다.