Java스크립트(Promise)

이번 포스트에서는 Promise의 개념과 사용법을 자세히 설명하고, 다양한 예제를 통해 이해를 돕겠습니다.
자바스크립트에서 비동기 프로그래밍은 매우 중요하며, 이 과정에서 Promise는 핵심적인 역할을 합니다. 

 

1. Promise란?

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 비동기 작업이 진행되는 동안의 상태를 추적할 수 있게 해줍니다. Promise는 다음과 같은 세 가지 상태를 가집니다:

• 대기(Pending): 초기 상태, 작업이 아직 완료되지 않은 상태입니다.
• 이행(Fulfilled): 작업이 성공적으로 완료된 상태입니다.
• 거부(Rejected): 작업이 실패한 상태입니다.

Promise는 비동기 작업의 결과를 처리하기 위한 간편하고 직관적인 방법을 제공합니다.

 

2. Promise의 생성

Promise는 new Promise를 사용하여 생성합니다. 생성자 함수는 두 개의 인자를 받습니다: resolve와 reject.

예제: 기본적인 Promise 생성
const myPromise = new Promise((resolve, reject) => {
    const success = true; // 작업 성공 여부
    if (success) {
        resolve("작업이 성공적으로 완료되었습니다.");
    } else {
        reject("작업이 실패했습니다.");
    }
});

위의 코드에서 myPromise는 작업의 성공 여부에 따라 resolve 또는 reject를 호출합니다.

 

3. Promise 사용하기

Promise를 사용하여 비동기 작업의 결과를 처리하는 방법은 then과 catch 메서드를 사용하는 것입니다.

예제: Promise 사용하기
const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => {
        const data = { name: "지민", age: 26 };
        resolve(data); // 2초 후에 데이터 반환
    }, 2000);
});

fetchData
    .then((data) => {
        console.log("받은 데이터:", data);
    })
    .catch((error) => {
        console.error("에러 발생:", error);
    });

위의 예제에서 fetchData Promise는 2초 후에 데이터를 반환합니다. then 메서드는 Promise가 이행되었을 때 호출되며, catch 메서드는 거부되었을 때 호출됩니다.

 

4. 여러 Promise 처리하기

여러 Promise를 동시에 처리할 수 있는 방법으로 Promise.all과 Promise.race가 있습니다.

예제: Promise.all
Promise.all은 여러 Promise가 모두 이행될 때까지 기다린 후 결과를 배열로 반환합니다.

const promise1 = new Promise((resolve) => {
    setTimeout(() => resolve("첫 번째 작업 완료"), 1000);
});

const promise2 = new Promise((resolve) => {
    setTimeout(() => resolve("두 번째 작업 완료"), 1500);
});

Promise.all([promise1, promise2])
    .then((results) => {
        console.log("모든 작업 완료:", results);
    })
    .catch((error) => {
        console.error("작업 중 오류 발생:", error);
    });

위의 예제에서 Promise.all은 두 개의 Promise가 모두 완료된 후 결과를 배열로 반환합니다.

예제: Promise.race
Promise.race는 여러 Promise 중 가장 먼저 이행되거나 거부된 Promise의 결과를 반환합니다.

const promise1 = new Promise((resolve) => {
    setTimeout(() => resolve("첫 번째 작업 완료"), 2000);
});

const promise2 = new Promise((resolve) => {
    setTimeout(() => resolve("두 번째 작업 완료"), 1000);
});

Promise.race([promise1, promise2])
    .then((result) => {
        console.log("가장 먼저 완료된 작업:", result);
    })
    .catch((error) => {
        console.error("작업 중 오류 발생:", error);
    });

이 예제에서 Promise.race는 두 개의 Promise 중 가장 먼저 완료된 promise2의 결과를 반환합니다.

 

5. 마치며

Promise는 자바스크립트의 비동기 프로그래밍을 보다 쉽고 효율적으로 처리할 수 있게 도와줍니다. 비동기 작업의 결과를 명확하게 처리할 수 있으며, 여러 작업을 동시에 관리하는 데 유용합니다. Promise의 개념과 사용법을 이해하고 활용하면, 더 나은 코드를 작성할 수 있습니다.