[JS] Promise

Promise는 비동기 처리의 한 방법으로, 전형적인 콜백패턴의 문제인 콜백지옥(callback hell)을 해결하기 위한 방법으로 많이 쓰인다.

 

인스턴스 생성

Promise의 인스턴스를 생성하면 인자로 전달된 함수를 실행한다. 인자로 전달된 함수는 resolve, reject 2개의 함수인 인자를 가지는데, 성공하면 resolve를 실행하고, 실패하면 reject를 실행시키면 된다. 오류가 발생하면 자동으로 reject를 실행된다.

function genPromise(flag) {
    return new Promise(function (resolve, reject) {
        console.log("do something");
        // throw new Error('something went wrong');
        if (flag) {
            console.log("success");
            resolve(flag);
        }
        else {
            console.log("fail");
            reject(flag);
        }
    });
}

 

인스턴스 메소드

Promise 인스턴스는 3가지 상태가 있다. Pending은 비동기 처리중 상태이며, Fulfilled는 성공상태, Rejected는 실패상태이다. 비동기 처리 결과가 성공해서 resolve를 호출하면 promise는 인스턴스 Fulfilled이 된다. 실패하여 reject를 호출하거나 오류가 발생하면 Rejected이 된다. Promise 인스턴스의 then 메소드를 이용하여 비동기 처리의 결과를 받을 수 있다. 첫번째 인자는 Fulfilled이 되면 호출되는 함수이며, 두번째 인자는 Rejected가 되면 호출된다.

// promise.then(onFulfilled, onRejected);
genPm(1).then(
    arg => console.log("resolve:", arg),
    arg => console.log('reject:', arg)
);

catch 메소드를 이용하여 Rejected상태의 promise를 처리할 수도 있다.

// promise.then(onFulfilled).catch(onRejected);
genPm(0)
    .then(arg => console.log("resolve:", arg))
    .catch(arg => console.log('reject:', arg));

 

정적 메소드

Promise.resolve()는 Fulfilled인 Promise 인스턴스를 반환한다.

Promise.resolve(0).then(arg => console.log("resolve:", arg));

Promise.reject()는 Rejected인 Promise 인스턴스를 반환한다.

Promise.reject(new Error('error')).catch(err => console.error(err));

 

then()의 반환값

반환값은 기본형, 객체 모두 가능하며 Promise.resolve(return_value)처럼 처리되어 chaining된 then()를 순차적으로 실행한다. 반환값이 promise인 경우에는 pending 상태이다.

promise.then(num => {
    console.log(`num: ${num++}`);
    return num;
}).then(num => {
    console.log(`num: ${num}`);
});