[Javascript] ES6 Promise를 통해 콜백지옥 문제를 해결해보자

 

Promise(프로미스)는 ES5까지 비동기로 호출하는 과정에서 생기는 콜백지옥 문제를 해결하기 위해 등장한 ES6 문법입니다.

 

우선 ES6가 등장하기 전에는 어떠한 복잡성이 있었는지 확인해보겠습니다.

// 비동기식 getNotice 요청
function getNotice(id, callback) {
    console.log('비동기식 get 요청이 이루어졌습니다.');

    // 3초 후 다음로직을 실행함
    setTimeout(function() {
        let notice = {id: 1, title: "title 1", content: "hehe"};
        callback(notice);
    }, 3000);
}

let notice = getNotice(2, function(notice) {
    console.log(notice.title); // 결과값을 가져오면 실행한다.
});

console.log('메인스레드는 계속 된다,');

위의 예시는 콜백함수를 하나만 적용했지만, 비동기로 호출하다보면 2, 3개 이상 적용되는 경우가 많습니다.

이럴 때는 코드가 콜백의 콜백의 콜백 ... 콜백지옥으로 빠질 수 있어서 가독성이 좋지 않습니다.

 

이번에는 ES6에 등장한 프로미스로 위의 코드를 바꿔보겠습니다.

function getNotice(id) {
    console.log('promise 비동기식 get 요청이 이루어졌습니다.');

    return new Promise((resolve, reject) => {
        // 3초 후 다음로직을 실행함
        setTimeout(function() {
            let notice = {id: 1, title: "title 1", content: "hehe"};
            resolve(notice); 
            // reject(new Error('에러났어요!'));
        }, 3000);
    });
}

let promise = getNotice(2);

// then에는 콜백함수를 넣어준다. 콜백 지옥을 벗어났으니 보기 깔끔하다.
promise.then(function(notice) { // 호출하고 비동기로 빠져서 비동기가 완료되면 console.log를 실행한다.
    console.log(notice.title);
});

console.log('메인스레드는 계속 된다,');

위의 코드를 실행하면 프로미스 객체가 리턴이 되는데 이를 콘솔로 찍어보면 다음과 같습니다.

이후 notice.title이 콘솔에 찍히게 됩니다

프로미스 객체는 pending, fulfilled, rejected 상태정보를 갖습니다.

pending : 비동기 처리가 아직 수행되지 않은 상태

fulfilled : 비동기 처리가 성공한 상태

rejected : 비동기 처리가 실패된 상태를 의미합니다.

 

프로미스 객체의 상태가 fulfilled(비동기 처리가 성공한 상태) 상태이면 resolve가 호출되고 rejected(비동기 처리가 실패된 상태) 상태이면 reject가 호출됩니다. 위의 예시에서는 성공했으므로 reject가 아닌 resolve가 호출됩니다.

 

호출된 resolve는 then 메서드를 통해 사용됩니다.

resolve는 notice를 인자로 넣어 호출하였으니 then 메서드에서 notice.title을 출력하였으니 "title 1"이 찍힙니다.

만약 비동기 처리가 실패됐다면 rejected가 호출되어 '에러났어요!'가 찍힐 것입니다.