비동기 처리: Promise


Promise

1. 개념

Promise는 비동기 작업의 성공 또는 실패를 처리하는 객체입니다. then 메서드로 작업이 성공했을 때의 결과를 처리하고, catch 메서드로 실패했을 때의 에러를 처리합니다. Promise는 작업이 성공(resolve)하거나 실패(reject)하는 경우를 설정하여 처리합니다.

2. 실행 순서

  • Promise 객체가 생성됩니다.
  • 비동기 작업이 실행됩니다.
  • 작업이 성공하면 resolve가 호출되고, 실패하면 reject가 호출됩니다.
  • then 또는 catch 메서드로 결과를 처리합니다.

3. 예제 코드

function goMart() {
    console.log('마트에 가서 어떤 음료를 살지 고민한다..');
}

function pickDrink() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('고민 끝');
            const product = '제로콜라';
            const price = 3000;
            if (product) {
                resolve({ product, price });
            }

            // reject 예시, 현재 코드에서는 product가 항상 있으므로 굳이 필요없음.
            // else {
            //     reject(new Error('제품을 찾을 수 없습니다.')); 
            // }
        }, 3000);
    });
}

function pay({ product, price }) {
    console.log(`상품명: ${product} // 가격: ${price}`);
}

goMart();
pickDrink()
    .then(pay)
    .catch(function(err) {
        console.error(err);
    });

4. 분석

  • (1) goMart 함수가 호출되어 “마트에 가서 어떤 음료를 살지 고민한다..”라는 메시지가 출력됩니다.
  • (2) pickDrink 함수가 호출됩니다. 이 함수는 새로운 Promise를 반환합니다. 이 함수는 setTimeout을 통해 3초 후에 비동기 작업을 시작합니다.
  • (3) 3초 후 setTimeout의 콜백 함수가 실행됩니다. “고민 끝”이라는 메시지가 출력되고, product 변수에 ‘제로콜라’, price 변수에 3000을 할당합니다.
  • (4) pickDrink 함수의 내부에서 resolve가 호출되어 Promise가 성공 상태가 됩니다.
  • (5) then 메서드에 전달된 pay 함수가 호출되며, product와 price를 인자로 받아 “상품명: 제로콜라 // 가격: 3000”이라는 메시지가 출력됩니다.
  • (6) Promise가 실패하지 않았으므로 catch 블록은 실행되지 않습니다.

5. 장단점

  • 장점: 가독성이 좋고 체인 형식으로 비동기 작업을 처리할 수 있습니다. 비동기 작업을 단계적으로 연결할 수 있어 복잡한 작업을 쉽게 처리할 수 있습니다.
  • 단점: 여전히 콜백 지옥을 완전히 피하지 못할 수 있으며, 많은 then과 catch를 사용하면 코드가 길어질 수 있습니다.