자바스크립트 프로미스(Javascript Promise) then catch에 대해 알아보자.

오늘은 promise의 상태와 그에 따른 진행 방식에 대해 알아보도록 하겠습니다.

function getNum() {
    return new Promise(function (resolve, reject) {
        var num = 10;
    });
}
getNum().then(function (resolvednum) {
    console.log(2)
    console.log(resolvednum);
})

 

위의 코드를 실행하면 어떤 결과가 나올까요?
1. 

2

10

2. 아무것도 나오지 않는다.

정답은 2번입니다.

프로미스 객체는 resolve, reject 되기 전까지 pending(대기)합니다.

resolve 혹은 reject가 실행되면 다음으로 넘어갈 수 있지요.

 

function getNum() {
    return new Promise(function (resolve, reject) {
        var num = 10;
        resolve(num)
    });
}
getNum().then(function (resolvednum) {
    console.log(2)
    console.log(resolvednum);
})

 

위와 같이 코드를 수정하면 

2

10

이 출력됩니다.

프로미스 객체가 대기 상태에서 fulfilled(이행) 상태로 넘어가기 때문입니다.

그렇게 되면 then()이 실행됩니다.

만약 reject를 하면?

 

function getNum() {
    return new Promise(function (resolve, reject) {
        var num = 10;
        reject(num)
    });
}
getNum().then(function (resolvednum) {
    console.log(2)
    console.log(resolvednum);
    resolve(1)

}).catch((resolvednum) => {
    console.log(resolvednum)
    console.log(3)
})

 

.then은 지나치고 

. catch뒤의 코드가 실행됩니다.

때문에 

10

3

출렵됩니다.

reject는 에러가 발생했을 때 사용합니다.

진행 과정을 보여드리기 위해 숫자를 넘겨준 것입니다.

정리하자면 프로미스 객체가 resolve()를 실행하면. then이

reject()를 실행하면. catch가 실행됩니다.

 

아래와 같이 10이라면 resolve를 아니라면 reject를 실행하도록 하면 

num이 10일 때는 10 

아니라면

Error: not 10

이 출력됩니다.

우리가 알게 모르게 사용하고 있는 수많은 promise객체들은 

프로세스가 성공적으로 진행되었다면 resolve를 

실패했다면 reject를 실행하도록 되어있습니다.

 

function getNum() {
    return new Promise(function (resolve, reject) {
        var num = 10;
        if (num==10){
            resolve(num)
        }else{
            reject(new Error('not 10'))
        }
    });
}
getNum().then(function (resolvednum) {
    console.log(resolvednum);
}).catch((err) => {
    console.log(err)
})

 

정리하면 아래 그림과 같습니다.

 

감사합니다