Promise

Promise
Promise는 비동기 작업을 처리하기 위해

Javascript 안에 내장되어 있는 객체이다.

 

1.Promise의 state

promise의 상태는

pending(작업 수행중) =>

fulfilled(작업완료) or rejected(작업실패)로 나뉜다.

 

2.Producer vs Consumer

promise는 기능을 수행하여 해당 데이터를 만들어내는 Producer

그리고 그 데이터를 소비하는 Consumer로 나뉜다,

 

Producer

//새로운 Promise가 만들어지면,안에 있는 기능이 자동적으로 실행된다.
const promise = new Promise((resolve,reject)=>{
  //무거운 작업들(network,read file)등은 이렇게 프로미스로 처리하는게 좋다.
  //resolve-기능수행을 성공하면 나타낼 콜백함수
  //reject-기능수행을 실패할 경우 나타낼 콜백함수
console.log('doing something...');
setTimeout(()=>{
  resolve('ellie');
},2000);
});
//doing something... 출력 후 2초뒤 ellie 출력

Consumer

then,catch,finally로 나뉜다.

//1.Producer
const promise = new Promise((resolve,reject)=>{
console.log('doing something...');
setTimeout(()=>{
  //resolve('ellie');
  reject(new Error('no network'))//Error->Javascript 내장객체
},2000);
});

//2.Consumers: then,catch,finally
promise//promise chaining-consumers는 결국 producer에서 만들어진
       //하나의 promise를 가지고 계속해서 사용하는 것이므로 아래와 같이 연쇄적으로 사용가능하다.
.then(value=>{//then-성공했을 경우 resolve에서 값을 받아와서 그대로 호출하거나 변형시킨다
  console.log(value);
})
.catch(error =>{//catch-실패했을 경우 reject에서 값을 받아와서 그대로 호출하거나 변형시킨다
  console.log(error);
})
.finally(()=>{//finally-성공, 실패에 상관없이 무조건 맨마지막에 호출시킨다.
  console.log('finally');
});

 

3.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 => {//then에는 값을 바로 전달해도 되고,Promise를 전달해도 된다
  return new Promise((resolve,reject) =>{
    setTimeout(()=>resolve(num-1),1000);
  }); //5
})
.then(num =>console.log(num)); //5

 

4.Error Handling

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);
  });
//🐓=>🥚=>🍳(error가 안났을시)

getHen()//
.then(getEgg)
.catch(error=>{
  return'🥖';
})//에러 발생시 대체할 것을 바로 다음줄에서 지정해줄 수 있다 🥖=>🍳
.then(cook)
.then(console.log)
.catch(console.log);