자바스크립트 프로미스 - Promise resolve, reject

자바스크립트 전체 링크

 

프로미스(Promise)를 이용하면 비동기 상태의 값을 다룰 수 있다.

 

Promise는 아래와 같이 new를 이용하여 만들 수 있다.

const myPromise = new Promise((resolve, reject) => {
    //resolve(message or data);
    //reject(message or data);
});

 

작업이 성공한다면 resolve가 호출되고, 실패한다면 reject가 호출된다.

resolve와 reject에서 받은 data 또는 message의 반환된 값을 then을 이용하여 받을 수 있다.

 

아래의 코드를 실행해보자.

function getData(response) {
    return new Promise((resolve, reject) => {
        if(response) resolve(`resolve ${response}`);
        else reject(`reject ${response}`); // or reject(new Error(`reject Error! ${response}`));
    }); 
}

getData(true)
.then((data) => console.log(`success : ${data}`))
.catch((error) => console.log(`failed : ${error}`));

getData(false)
.then((data) => console.log(`success : ${data}`))
.catch((error) => console.log(`failed : ${error}`));

 

getData의 response가 true면 resolve가 호출되고, "resolve true"를 반환 받는다.

그리고 then에서 반환 받은 값으로 코드가 실행된다.

 

response가 false인 경우 reject된 코드는 catch에서 실행되는 것을 알 수 있다.

 

finally 메서드를 이용하면 then/catch, 즉 작업의 성공, 실패 여부와 상관없이 코드를 실행한다.

function getData(response) {
    return new Promise((resolve, reject) => {
        if(response) resolve(`resolve ${response}`);
        else reject(`reject ${response}`); // or reject(new Error(`reject Error! ${response}`));
    }); 
}

getData(true)
.then((data) => console.log(`success : ${data}`))
.catch((error) => console.log(`failed : ${error}`))
.finally(() => console.log(`finally`));

getData(false)
.then((data) => console.log(`success : ${data}`))
.catch((error) => console.log(`failed : ${error}`))
.finally(() => console.log(`finally`));

---

new 말고도 Promise의 resolve와 reject를 이용해서 Promise를 생성할 수 있다.

Promise.resolve('test')
.then((data) => console.log(`resolve 1 ${data}`), (data) => console.log(`reject 1 ${data}`))
.then((data) => console.log(`resolve 2 ${data}`), (data) => console.log(`reject 2 ${data}`))
.then((data) => console.log(`resolve 3 ${data}`), (data) => console.log(`reject 3 ${data}`))
.then((data) => console.log(`resolve 4 ${data}`), (data) => console.log(`reject 4 ${data}`))
.then((data) => console.log(`resolve 5 ${data}`), (data) => console.log(`reject 5 ${data}`));

 

Promise의 resolve에서 "test"를 첫 번째 then에서 넘겨 받고, resolve의 코드가 실행된다.

2 ~ 5 번째 then에서는 return 받은 값이 없으므로 undefined가 출력된다.

 

Promise의 resolve를 reject로 바꿔보자.

Promise.reject('test')
.then((data) => console.log(`resolve 1 ${data}`), (data) => console.log(`reject 1 ${data}`))
.then((data) => console.log(`resolve 2 ${data}`), (data) => console.log(`reject 2 ${data}`))
.then((data) => console.log(`resolve 3 ${data}`), (data) => console.log(`reject 3 ${data}`))
.then((data) => console.log(`resolve 4 ${data}`), (data) => console.log(`reject 4 ${data}`))
.then((data) => console.log(`resolve 5 ${data}`), (data) => console.log(`reject 5 ${data}`));

reject를 실행하여서 첫 번째 then은 reject를 실행하였다. 

이후 작업은 성공하므로 resolve가 호출된다.

 

이제 세 번재 then에 error를 던져보자.

Promise.reject('test')
.then((data) => console.log(`resolve 1 ${data}`), (data) => console.log(`reject 1 ${data}`))
.then((data) => console.log(`resolve 2 ${data}`), (data) => console.log(`reject 2 ${data}`))
.then((data) => 
{
    console.log(`resolve 3 ${data}`);
    throw new Error('then 3 error!');
}, (data) => console.log(`reject 3 ${data}`))
.then((data) => console.log(`resolve 4 ${data}`), (data) => console.log(`reject 4 ${data}`))
.then((data) => console.log(`resolve 5 ${data}`), (data) => console.log(`reject 5 ${data}`));

 

reject 호출로, 첫 번째 then은 실패, 두 번째 then은 성공한다.

따라서 세 번째 코드는 실행되었고, Error를 던져서 네 번째 then은 reject가 호출되었다.

네 번째 then이 무사히 작업을 성공하였으므로, 다섯 번째 then은 다시 resolve를 호출한다.

 

reject 함수를 만드는 대신 catch로 error를 잡을 수도 있다.

아래의 코드는 네 번째 then의 reject를 catch로 분리하였다.

Promise.reject('test')
.then((data) => console.log(`resolve 1 ${data}`), (data) => console.log(`reject 1 ${data}`))
.then((data) => console.log(`resolve 2 ${data}`), (data) => console.log(`reject 2 ${data}`))
.then((data) => 
{
    console.log(`resolve 3 ${data}`);
    throw new Error('then 3 error!');
}, (data) => console.log(`reject 3 ${data}`))
.then((data) => console.log(`resolve 4 ${data}`))
.catch((error) => console.log(`reject 4 ${error}`))
.then((data) => console.log(`resolve 5 ${data}`), (data) => console.log(`reject 5 ${data}`));

 

결과에서 보이듯이 catch 이후에도 then 메서드를 여전히 사용할 수 있다.