JavaScript 기초(31)_프로미스(2) reject

1. 프로미스의 활용

 

프로미스 객체를 만든 후에 어떻게 사용할까?

우선 아래와 같이 'p'에 다가 프로미스 객체를 할당할 수 있다.

const p = new Promise((resolve, reject) => { 
          /* pendding */
    setTimeout(() => {
        resolve(); /* fulfilled */
    }, 1000);
});

p.then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
});

[Running] 
1000ms 후에 fulfilled 됩니다.

위 코드를 보면 'then()'을 활용하여 프로미스 객체가 할당된 p의 setTimeout 함수를 콜백 하여 출력하였다.

실제로 1000ms 뒤에 문자열에 출력됨을 확인 할 수 있다. 

 

 

그러나 위의 방식은 권장되는 방식은 아니다. 

아래는 함수 방식으로 프로미스 객체를 활용한 코드이다.

function p(){
    return new Promise((resolve, reject) => { 
    	/* pendding */
        setTimeout(() => {
            resolve(); /* fulfileed */
        }, 1000);
    });    
}
 
p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
});

 

 

[Running]
1000ms 후에 fulfilled 됩니다.

then을 설정하는 시점을 정확히하고,

함수의 실행과 동시에 프로미스 객체를 만들면서 pendding 하기 위해

프로미스 객체를 생성하면서 리턴하는 함수를 만들어 함수 실행과 동시에 then을 설정한다.

 

 

이번에는 rejected도 잘되는 지 확인해보자.

function p(){
    return new Promise((resolve, reject) => { 
        /* pendding */
        setTimeout(() => {
            reject(); /* rejected */
        }, 1000);
    });    
}
 
p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
}).catch(() => {
    console.log('1000ms 후에 rejected 됩니다.');
});

[Running]
1000ms 후에 rejected 됩니다.

rejected를 콜백할 때는 'catch()'를 사용하여 위와 같이 활용할 수 있다. 

 

 

resolve()나 rejected()에는 다음과 같이 메시지를 담을 수 있다.

function p(){
    return new Promise((resolve, reject) => { 
        /* pendding */
        setTimeout(() => {
            resolve('hello'); /* fulfiled */
        }, 1000);
    });    
}
 
p().then((message) => {
    console.log('1000ms 후에 fulfilled 됩니다.', message);
})

[Running]
1000ms 후에 fulfilled 됩니다. hello

 

function p(){
    return new Promise((resolve, reject) => { 
        /* pendding */
        setTimeout(() => {
            reject('bye'); /* rejected */
        }, 1000);
    });    
}
 
p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
}).catch((message) => {
    console.log('1000ms 후에 rejected 됩니다.', message);
});

[Running] 
1000ms 후에 rejected 됩니다. bye

 

 

특히 reject 함수는 주로 rejected되는 이유를 남기는데 쓰인다. 

아래와 같이 표준 내장 객체인  Error의 생성자를 이용하여  Error객체를 만들어 쓸 수 있다.

 

function p(){
    return new Promise((resolve, reject) => { 
        /* pendding */
        setTimeout(() => {
            reject(new Error('bad')); /* rejected */
        }, 1000);
    });    
}
 
p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
}).catch((error) => {
    console.log('1000ms 후에 rejected 됩니다.', error);
});

[Running] 
1000ms 후에 rejected 됩니다. Error: bad
    at Timeout._onTimeout (/Users/jeonghoonkim/Desktop/react200/src/test.js:5:20)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7)

결과를 보면 Error 밑으로 보여지는 것들은

Error 객체가 로그로 찍힐 때 나오는 것들이다.