Javascript 프로미스(Promise) 완벽 이해

Javascript 프로미스(Promise) 완벽 이해

자바스크립트에서 비동기 처리를 더 효율적으로 관리하기 위해 등장한 개념이 바로 프로미스(Promise)입니다. 프로미스는 비동기 작업을 처리할 때 콜백 지옥을 피할 수 있는 유용한 방법으로, 코드를 더 깔끔하고 직관적으로 만들어 줍니다.

프로미스(Promise)란?

프로미스는 비동기 작업을 관리할 수 있게 해주는 객체로, 작업이 완료될 때 성공 또는 실패 결과를 처리할 수 있습니다. 프로미스 객체는 pending, resolved, rejected 상태를 가집니다.

프로미스 생성자 및 사용법

const myPromise = new Promise((resolve, reject) => {
    const success = true;
    
    if(success) {
        resolve("작업 성공");
    } else {
        reject("작업 실패");
    }
});

myPromise
    .then(result => console.log(result))  // 성공했을 때
    .catch(error => console.log(error));  // 실패했을 때
        

위 예제에서 myPromise는 성공과 실패를 처리하는 Promise 객체를 생성합니다. .then() 메서드는 성공적인 결과를 처리하고, .catch() 메서드는 실패한 결과를 처리합니다.

프로미스 체이닝 (Promise Chaining)

const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => resolve("데이터를 가져왔습니다."), 1000);
});

fetchData
    .then(data => {
        console.log(data);
        return "다음 작업 처리";
    })
    .then(result => console.log(result))
    .catch(error => console.log(error));
        

프로미스 체이닝을 통해 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 각 .then()에서 반환한 값은 다음 .then()으로 전달됩니다.

Promise.all과 Promise.race

여러 개의 프로미스를 병렬로 처리할 때, Promise.all과 Promise.race를 활용할 수 있습니다.

Promise.all

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "첫 번째"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, "두 번째"));

Promise.all([promise1, promise2])
    .then(values => console.log(values))  // 모든 프로미스가 성공적으로 완료되면
    .catch(error => console.log(error));
        

Promise.all은 배열 안의 모든 프로미스가 성공적으로 완료되었을 때 처리됩니다. 만약 하나라도 실패하면 .catch()로 넘어갑니다.

Promise.race

Promise.race([promise1, promise2])
    .then(value => console.log(value))  // 첫 번째로 완료된 프로미스를 처리
    .catch(error => console.log(error));
        

Promise.race는 여러 프로미스 중 첫 번째로 완료된 프로미스의 결과를 반환합니다.

에러 처리

const failingPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject("에러 발생!"), 1000);
});

failingPromise
    .then(result => console.log(result))
    .catch(error => console.log("에러 처리:", error));
        

프로미스에서 에러가 발생하면 .catch() 메서드를 통해 에러를 처리할 수 있습니다.