Promise - Promise Chaining & Error Handling

Promise Chaining (프로미스 연결하기)

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout (()=> resolve(1), 1000);
}); //1초 있다가 성공하면 1을 전달하는 promise 작성

fetchNumber
.then(num => num * 2)  //resolve에서 전달된 값 1이 num으로 전달되어서 num*2인 2를 반환
.then(num => num * 3) // 위에서 받은 2가 num으로 전달되어 num*3인 6을 반환
.then(num => {
    return new Promise((resolve, reject) =>{
        setTimeout( () =>  resolve(num-1), 1000);
    });                      // 위에서 받은 6이 num으로 전달되어 num-1인 5를 반환
    
})
.then(num => console.log(num));       // 최종적으로 5를 출력

then은 값을 바로 전달할 수도 있고, 아니면 또 다른 비동기인 Promise를 전달해도 된다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31

또 다른 예제이다.

위 코드는 프로미스 객체를 하나 생성하고 setTimeout()을 이용해 2초 후에 resolve()를 호출하는 예제이다.

resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫 번째 .then()의 로직으로 넘어간다.

첫 번째 .then()에서는 이행된 결과 값 1을 받아서 10을 더한 후 그다음 .then() 으로 넘겨준다.

두 번째 .then()에서도 마찬가지로 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨준다.

마지막 .then()에서 최종 결과 값 31을 출력한다.

 

Error Handling(에러 처리하기)

//4. Error Handling
const getHen = () =>
    new Promise((resolve,reject) => {
        setTimeout(()=> resolve ('🐓'), 1000);
    });


const getEgg = (hen) =>
    new Promise((resolve,reject) =>{
        setTimeout(() => resolve (`${hen} => 🥚`), 1000 );
    });

const cook = (egg) =>
    new Promise((resolve, reject) =>{
        setTimeout(() => resolve (`${egg} => 🍳`), 1000);
    });

getHen()
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => console.log(meal));

이것을 출력하면 🐓 => 🥚 => 🍳 이렇게 출력이 되는 것을 볼 수가 있다.

 

그런데, 만약 달걀을 받아오는 도중에 에러가 생기면 어떻게 될까?

const getEgg = (hen) => 
    new Promise((resolve, reject)=>{
        setTimeout(()=> reject(new Error(`error! ${hen} => 🥚`)), 1000);
    });

다음과 같이 코드를 수정하고 실행해보면 에러가 발생한다.

 

 

getHen()
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => console.log(meal))
.catch(console.log);

 

이렇게 마지막에 catch로 잡으면 에러가 잡히는 것을 볼 수가 있다.

 

 

getHen()
.then(hen => getEgg(hen))
.catch(error => {
    return '🥖';
})
.then(egg => cook(egg))
.then(meal => console.log(meal))
.catch(console.log);

 

이렇게 catch로 빵을 대신 전달해주면 에러가 잘 잡힌 것을 볼 수가 있다.

즉 전달되어진 에러를 우리가 잘 처리해서, 빵으로 대체해서,

즉 계란을 받아오는 것에 문제가 생겨도 전체적인 프로미스 체인에 문제가 발생하지 않도록 빵꾸 처리를 해주는 것이다.

 

다음시간에는 콜백 지옥을 promise로 간결하게 만드는 것을 하겠다.