[카테고리:] JavaScript

Promise는 코드의 실행 흐름에서 비동기처리를 유연하게 처리하기 위한 API입니다. 코드를 통해 살펴보겠습니다.

function test(callback) {
    setTimeout(() => {
        callback();
    }, 2000);
}

function callback() {
    console.log('Hello!')
}

test(callback);

위의 코드는 2초 뒤에 콘솔에 Hello!를 출력합니다. 이 코드를 Promise API로 대체하면 아래와 같습니다.

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(); 
        }, 2000);
    })
}

function callback() {
    console.log('Hello!');
}

test().then(callback);

좀더 완전한 Promise API를 위한 위의 코드에서 확장된 코드를 살펴보면 아래와 같습니다.

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let bOK = true;

            console.log('1');            
            if(bOK) {
                resolve(1); // [Fulfilled State] 1, 2를 콘솔에 출력하고 적당한 시점에 then으로 넘겨준 함수를 호출해 줌           
            } else {
                reject(-1); // [Rejected State] 1, 2를 콘솔에 출력하고 적당한 시점에 예외를 발생시킴
            }
            console.log('2'); 
        }, 2000);
    })
}

function callback(result) {
    console.log('Hello! : ' + result)
}

let p = test(); // [Pending State]
p.then(callback); // Promise의 resolve 호출에 의해 callback이 호출됨

Promise는 3가지 상태를 갖는다고 합니다. Promise 객체가 생성되어 사용될 준비가 된 Pending, 비동기 처리에 의해 원하는 올바른 결과를 얻어와 그 결과를 정상적으로 처리하고자 resolve가 호출된 Fulfilled 상태, 무언가 잘못되어 예외로 처리하고자 reject가 호출된 Rejected 상태입니다. 위의 짧은 코드를 살펴보면, 어떤 이 3가지 상태에 대한 시점을 확인할 수 있습니다. resolve와 reject는 각각 성공과 실패에 대한 결과값을 얻을 수 있는 객체를 전달할 수 있습니다. 위의 코드에서는 각각 1와 -1을 넘겨주고 있습니다. 주목할 점은 resolve와 reject는 동시에 같이 실행될 수 없으며 배타성을 갖습니다. 즉, resolve가 호출되면 reject 코드가 호출된다고 해도 실행되지 않으며, reject 코드가 호출되면 resolve가 호출되어도 reject가 호출되지 않습니다. 또 하나는 resolve에 의해 실행되는 callback은 resolve가 호출될때 즉시 실행되지 않습니다. 위의 코드의 주석을 보면 console.log(‘1’)과 consloe.log(‘2’)의 위치 사이에 각각 resolve와 reject가 있는데.. 실행순서는 console.log(‘1’)과 console.log(‘2)가 먼저 실행되고 resolve 또는 reject에 연결된 함수가 호출된다는 점입니다. 이 글의 마지막으로.. reject가 호출되면 예외를 던지게 됩니다. 위의 코드는 적당한 예외에 대한 처리를 하고 있지 않습니다. 이 예외 처리까지 포함된 코드는 다음과 같습니다.

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let bOK = false;

            if(bOK) {
                resolve(1);           
            } else {
                reject(-1); // Promise의 catch로 넘겨준 함수를 호출해 줌
            }
        }, 2000);
    })
}

function callback(result) {
    console.log('Hello! : ' + result)
}

function callbackError(result) {
    console.log('Oh my god! : ' + result)
}

test().then(callback, callbackError).catch(callbackError); // then과 catch는 Promise 객체를 반환해줌
// test().then(callback, callbackError); // 바로 위의 코드와 동일함

reject 함수의 호출로 인해 Promise 객체의 catch로 넘겨준 함수를 호출할 수 있게 되어 적절한 예외 처리가 가능해 집니다.

Promise는 사실 기반 API입니다. 즉, Promise를 기반으로 상대적으로 상위 레벨의 API를 통해 Promise를 사용하게 되는데요. async/await나 fetch가 바로 그것인데요, fetch는 아래의 글을 참고하시기 바랍니다.

ES6의 Fetch API