JavaScript - Promise

학습목표

• Promise의 개념을 이해할 수 있다.
• Promise 코드를 핸들링 할 수 있다.

Promise 만들기

자바스크립트에 내장되어 있는 Promise를 이용

• resolve, reject의 콜백을 이용
• then에서 resolve 또는 reject의 리턴값을 받아 실행됨
• 에러 발생시 catch문을 작성하여 어떻게 처리할 것인지 기입

1. Producer
//when new promise created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
	//doing some heavy work (network, read files)
    
    console.log('doing something...');
    
    setTimeout(() => {
    	resolve('younho');
    }, 2000);				//2초뒤에 resolve 실행
});



//2. Consumer: then, catch, finally
promise
	.then(value => {
		console.log(value);
    	/*   
           어떤 데이터가 전송 되는가에 따라서 
           resolve 또는 reject가 then의 value로 전달   
        */
	})
    .catch(error => {
    	console.log(error);
        // then에 reject가 전달될 경우 catch문 실행
    })
    .finally(() => {
    	console.log('finally');
    });

Promise chaining

• then을 통해서 값을 계속 넘겨줄 수 있다.
• 또한, Promise도 로직에 넣을 수 있다.

const fetchNumber = new Promise((resolve, reject) => {
    	setTimeout(() => resolve(1), 1000);
    	// 1초 후에 promise 실행
});

fetchNumber
.then(num => num * 2)	//resove의 1이 num으로 전달
.then(num => num * 3)
.then(num => {
	return new Promise((resolve, reject) => {    
    /*----then에서 값을 전달 받다가 Promise로 전달도 가능하다.----*/
    	setTimeout (() => resolve(num-1, 1000);
    });
})
.then(num => console.log(num));

Promise error 핸들링

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));
  
  출력되는 값을 바로 넣어 주는 경우에는 코드를 더 간결하게 할 수 있다.
*/

getHen()
  .then(getEgg)
  .then(cook)
  .then(console.log);
  
  /*------------ 에러를 일부로 생성 ------------*/
  
  const getHen = () =>
	new Promise ((resolve, reject) => {
    	setTimeout(() => resolve('🐓'),1000);
});

const getEgg = hen =>
	new Promise ((resolve, reject) => {
    	setTimeout(() => reject (new Error((`${hen} => 🥚`)),1000); //에러 생성
});

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

getHen()
.then(getEgg)
.catch( error => {			//에러 발생시 예외 처리
  	return '🍞';   })
.then(cook)
.then(console.log)
.catch(console.log);