jsNote 11: Promise 프로미스

1. Promise

• callback을 대체하여 비동기를 간편하게 처리할 수 있도록 도와주는 js 안에 내장되어 있는 object
• 정상적으로 기능이 수행되면 성공 메세지와 결과값을 전달하고 아니면 에러를 전달한다.
• 1) state : process가 기능 수행을 중인지(pending), 기능수행을 완료했는지(fulfilled or rejected)의 상태를 아는 것이 중요하다.
• 2) data를 제공하는 사람(producer)과 제공받는/소비하는 사람(consumer)의 차이점을 정확히 알아야 한다.
  
  
  

2. Producer

const promise = new Promise((resolve, reject) => {
    console.log('doing something...');
    setTimeout(() => {
        //resolve('emma'); 
        //성공 시, 성공적으로 네트워크에서 받아온 resolve라는 함수를 통해 'emma' 값을 전달
        reject(new Error('no network')); //에러 시, 무슨 에러가 발생했는지 잘 명시할 것
    }, 2000)
})

• date를 받아오는 동안(code의 'doing someting 부분) 그 다음 코드가 진행되지 않기 때문에 promise를 사용하여 비동기적으로 처리한다.
• 'doing something...'이 바로 출력되는 것을 보아 promise를 생성하는 순간 바로 executor 함수가 바로 실행 된 것을 확인할 수 있다(네트워크 통신 실행).
• 사용자가 어떤 동작을 했을 때 네트워크 요청을 해야하는 거라면 위 사실을 유의하여 코드를 짠다.
  
  
  

3. Consumer

• then, catch, finally를 이용해서 값을 받아온다.

promise
.then((value) => {
    console.log(value);
}) //promise가 잘 수행되었다면 resolve에서 전달한 값이 value에 들어옴
.catch(error => {
    console.log(error);
})
.finally(() => {console.log('finally')}); 
//성공하든 실패하든 어떤 기능을 마지막으로 수행하고 싶을 때 쓰고싶은 함수

4. Promise chaining

• then을 묶어서 비동기 처리
• then은 값을 바로 전달할 수도 있고 리턴으로 promise를 전달해도 된다.

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num-1), 1000);
    });
})
.then(num => console.log(num)); //5 

5. Error handling

const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('🐓'), 1000);
    }); //암탉을 받아오는 Promise는 1초 후에 🐓 리턴
const getEgg = hen =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${hen} => 🥚`), 1000);
        setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
    }); //hen을 받아오는 Promise는 1초 후에 🥚 리턴
const cook = egg => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => 🍳`), 1000);
    }); //egg를 받아오는 Promise는 1초 후에 🍳 리턴 

getHen() //getHen을 받아오면
.then(hen => getEgg(hen)) //전달받은 닭을 이용해서 getEgg 호출
.then(egg => cook(egg)) //계란이 받아지면 요리하는 cook 호출
.then(meal => console.log(meal)); //🐓 => 🥚 => 🍳

//then에서 받아오는 value를 다른 함수로 바로 호출하는 경우에는 생략가능. 아래처럼 표현 가능

getHen()
.then(getEgg)
.catch(error => {
    return '🍟';
}) //전달된 에러를 🍟로 대체해서 전체적인 체인에 문제가 되지 않게 처리
.then(cook) 
.then(console.log); //🐓 => 🥚 => 🍳