Javascript - Promise

유튜브 채널 드림코딩 참고

promise

• 자바스크립트 내장 object.
• 비동기 작업을 수행할 때 콜백 함수 대신 사용할 수 있음.

유의점

1. state(상태)의 이해
   - 작업이 진행중일때 pending
   - 작업이 완료되면 fulfilled
   - 작업에 오류가 발생하면 rejected
   정보를 제공하는
2. 정보를 제공하는 producer / 정보를 소비하는 consumer의 차이점 이해

Promise의 구성

• 주로 Promise는 무거운 작업(네트워크 통신, 파일 읽기 등) 수행한다. 그 이유는 시간이 소요되는 작업을 동기적으 처리한다면 다른 코드가 실행되지 않기 때문.
• 이런 작업은 최대한 비동기적으로 처리해야한다.

const promise = new Promise((resolve,reject){ // Promise는 클래스이기 때문에 new로 생성.
  // 2개의 매개변수를 가지는 콜백 함수 작성
  // 기능을 정상적으로 수행 후 데이터를 전달하는 resolve
  // 기능에 문제가 발생하여 정상적인 작업이 안된 경우 reject
	console.log('hi promise') 
	// 실행할 경우 바로 실행됨.
	// 사용자가 버튼을 눌렀을 때 네트워크 요청을 해야 하는 경우 
	// 이렇게 바로 실행된다면 불필요한 네트워크 통신이 발생하므로 유의해서 Promise를 사용해야 된다.  
})

then, catch, finally

// Producer 
const promise = new Promise((resolve,reject){ 
	// 비동기적으로 실행시키고 싶은 작업 작성
 setTimeout(()=>{
	// resolve('good'); // 성공적으로 작업을 수행했을 때 resolve라는 콜백 함수 호출
  	// reject(new Error('bad error')); // 작업이 실패했을 경우, reject는 보통 Error 오브젝트를 통해 전달함. 
},2000);
})

// Consumer : then, catch, finally
promise
  .then((value)=>{ // then : 성공적으로 수행된다면 resolve 콜백 함수에서 발생한 값인 'good'이 value의 값으로 전달됨.
console.log(value); // result : 'good' 
})
  .catch(error => { // then을 호출하면 promise가 return되고 catch를 호출
	console.log(error); // result : Error: bad error 
})
  .finally(()=>{ // 성공 실패 여부와 관계없이 무조건 실행시킴, 인자를 받지 않는다. 
  	console.log('finally') // then또는catch가 실행된 뒤 finally 실행됨.
  )

성공적으로 수행됐다면 resolve 호출되고, 실패했다면 reject 호출 then과 catch를 이용해서 성공한 값, 실패한 에러를 가져와서 원하는 방식으로 처리

Promise chaining

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

fetchNumber
  .then(num => num*2) // 2
  .then(num=> num*3)  // 6
  .then(num=>{
	return new Promise((resolve,reject)=>{ // 새로운 프로미스를 전달해도 됨. 
    	setTimeout(()=>resolve(num-1),1000); // 6
    })
}).then(num=>console.log(num));

Promise Error Handling

const getHen = () =>
	new Promise((resolve,reject)=>{
    	setTimeout(()=>resolve('Hen'),1000);
    });
const getEgg = hen =>
	new Promise((resolve,reject)=>{
    	setTimeout(()=>reject(new Error(`error! ${hen} => egg`)),1000);
    });
const cook = egg =>
	new Promise((resolve,reject)=>{
    	setTimeout(()=>resolve(`${egg} => cook`),1000);
    })

//1. 에러가 발생
getHen()
.then(getEgg) // 콜백함수를 전달할 때 받아오는 밸류로 바로 호출한다면 인자 생략가능
.then(cook)
.then(console.log); 
.catch(console.log); // result : Error : error ! Hen=>Egg 

// 2. 전달된 에러를 처리해서 다른 것으로 대체하고 싶은 경우
getHen()
.then(getEgg)
.catch(error => { // 프로미스 chain이 실패하지 않도록 에러가 발생했을 때의 대체 요소, 해결 요소를 설정해놓을 수 있다.
	return 'bread';
})
.then(cook)
.then(console.log); 
.catch(console.log); // result : bread => cook