JS Promise란?

자바스크립트 Promise?

자바스크립트에서 비동기 작업을 처리할 때 유용하게 사용되는 것이 Promise 객체이다. Promise는 비동기 작업을 처리하고 이를 통해 비동기 코드를 쉽게 작성하고 관리할 수 있다. 또한 Promise 콜백 함수의 콜백 지옥 문제점을 부분적으로 해결할 수 있다.

Promise는 미래에 완료될 작업을 나타내며 성공(resolve) 또는 실패(reject) 여부에 따라 각각 다른 처리를 할 수 있다. 기본적으로 Promise는 비동기 작업의 결과를 추상화하여 성공했을 때와 실패했을 때 각각의 처리를 간편하게 할 수 있도록 도와준다.

Promise의 상태

1. Pending(대기): 아직 작업이 완료되지 않은 상태
2. Fulfilled(이행): 작업이 성공적으로 완료된 상태
3. Rejected(거부): 작업이 실패한 상태

Promise 기본 사용법

여기서 resolve는 작업이 성공했을 때 reject는 실패했을 때 호출된다. 이 Promise는 나중에 .then()과 .catch()를 통해 처리할 수 있다.

const myPromise = new Promise((resolve, reject) => {
    let success = true; // 성공 여부를 예시로 설정

    if (success) {
        resolve("작업 성공!");  // 성공 시 호출
    } else {
        reject("작업 실패.");   // 실패 시 호출
    }
});

프로듀서와 컨슈머

Promise에서 프로듀서(Producer)는 비동기 작업을 수행하는 주체이고 컨슈머(Consumer)는 그 결과를 소비하는 주체이다.

• 프로듀서: 데이터를 제공하거나 비동기 작업을 수행하는 역할
• 컨슈머: 비동기 작업이 끝난 후 데이터를 소비하고 처리하는 역할

프로듀서 역할

Promise를 생성하는 주체로 비동기 작업을 정의하는 코드가 프로듀서이다. 예를 들어 네트워크 요청을 보내는 함수, 파일을 읽는 함수 등이 프로듀서 역할을 한다. 아래 코드는 setTimeout은 1초 후에 resolve를 호출하여 데이터를 전달하는 프로듀서인 것이다.

const producerPromise = new Promise((resolve, reject) => {
    // 비동기 작업: 데이터를 생성
    setTimeout(() => {
        const data = "생성된 데이터";
        resolve(data); // 작업 성공 시 데이터를 전달
    }, 1000);
});

컨슈머 역할

프로듀서가 데이터를 생성하면 그 데이터를 사용하는 코드가 컨슈머이다. then()과 catch()는 프로듀서가 생성한 데이터를 받아 처리하는 컨슈머의 역할을 한다.

producerPromise
    .then((data) => {
        console.log("컨슈머가 받은 데이터:", data); // 데이터를 소비하는 컨슈머
    })
    .catch((error) => {
        console.error("에러 처리:", error); // 실패 시 에러 처리
    });

Promise 체이닝

여러 개의 비동기 작업이 순차적으로 실행되어야 할 경우 각 작업이 완료된 후 다음 작업을 처리하는 방식으로 Promise 체이닝을 사용할 수 있다. 이때 프로듀서와 컨슈머의 역할이 자연스럽게 이어지게 된다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("첫 번째 데이터");
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // 첫 번째 프로듀서의 데이터를 소비
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("두 번째 데이터");
            }, 1000);
        });
    })
    .then((secondData) => {
        console.log(secondData); // 두 번째 프로듀서의 데이터를 소비
    })
    .catch((error) => {
        console.error("에러 발생:", error);
    });

참고문헌

Promise - JavaScript | MDN