[JS] Promise에 대해서

Junwoo Park·2024년 8월 30일

JavaScript

목록 보기

5/6

Promise에 대한 이해

Promise는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업이 성공했는지 실패했는지를 명확하게 표현할 수 있으며, 콜백 지옥(중첩된 콜백 함수의 복잡성)을 해결하기 위해 도입되었습니다.

Promise의 기본 개념

Promise는 비동기 작업이 완료된 후, 그 결과값(성공 또는 실패)을 나타내는 객체입니다. Promise는 다음 세 가지 상태를 가질 수 있습니다.

Pending (대기): 초기 상태로, 비동기 작업이 아직 완료되지 않은 상태입니다.
Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태입니다. 이 때, then 메서드를 통해 결과값을 처리할 수 있습니다.
Rejected (실패): 비동기 작업이 실패한 상태입니다. 이 때, catch 메서드를 통해 에러를 처리할 수 있습니다.

Promise의 사용 방법

Promise 객체를 생성하려면, new Promise()를 사용해야 하며, 이때 함수가 인자로 들어갑니다. 이 함수는 두 개의 인자를 받는데, 하나는 resolve(이행), 다른 하나는 reject(실패)입니다. 비동기 작업이 성공하면 resolve를 호출하고, 실패하면 reject를 호출합니다.

const promise = new Promise((resolve, reject) => {
    const success = true; // 예시로 작업의 성공 여부를 정의

    if (success) {
        resolve('작업 성공!');
    } else {
        reject('작업 실패!');
    }
});

위의 코드에서 success가 true이면 resolve가 호출되고, false이면 reject가 호출됩니다.

Promise의 작동 방식

Promise는 기본적으로 비동기 작업이 완료된 후, then과 catch 메서드를 통해 결과를 처리합니다.

promise
    .then((message) => {
        console.log(message); // '작업 성공!' 출력
    })
    .catch((error) => {
        console.error(error); // 에러가 발생하면 '작업 실패!' 출력
    });

위 코드에서는 promise가 이행되면 then 블록이 실행되고, 실패하면 catch 블록이 실행됩니다. then은 성공 시 호출되는 함수이고, catch는 실패 시 호출되는 함수입니다.

Promise의 체이닝

Promise는 체이닝(연쇄)하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 이는 이전 작업이 완료된 후에 다음 작업을 실행하는 데 매우 유용합니다.

const asyncTask = new Promise((resolve, reject) => {
    setTimeout(() => resolve('첫 번째 작업 완료!'), 1000);
});

asyncTask
    .then((result) => {
        console.log(result); // '첫 번째 작업 완료!'
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve('두 번째 작업 완료!'), 1000);
        });
    })
    .then((result) => {
        console.log(result); // '두 번째 작업 완료!'
        return '세 번째 작업 완료!';
    })
    .then((result) => {
        console.log(result); // '세 번째 작업 완료!'
    })
    .catch((error) => {
        console.error('에러 발생:', error);
    });