Promise

Promise는?

비동기를 간편하게 처리할 수 있도록 도와주는 자바스크립트 오브젝트

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

• state: (만들어져서 수행 중일 때)pending (성공적으로 완료)fulfilled (실패)rejected

• Producer vs Consumer

1.Producer

when new Promis is created, the executor runs automatically

const promise = new Promise(resolve, reject) => {
  //doing some heavy work(network, read file)
  console.log('doing something...');
  setTimeout(()=>{
  //resolve('annie')
  reject(new Error('no network'));
  },2000);
  });

프로미스를 만드는 순간 바로 요청이 감

2.Cousumers: then, catch, finally

정상적으로 수행이되면 값을 받아서 사용할 수 있음

promise.then((value)=>{
  console.log(value)
})
.catch(error => {
  console.log(error);
  })
  .finalyy(() => {
  console.log('finally');
  })

Promise chaining

const fetchNumbber = 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));

async & await

1. async

function fetchUser() {
  return new Promise((resolve, reject) =>{
     //do network request in 10secs...
     resolve('ellie');
     });
 }

async function fetchUser() {
// do network request in 10 secs...
retrun 'ellie';
}

const user = fetchUser();
user.then(console.log);re

2. await

 function delay(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
   }
   
   async function getApple() {
     await delay(3000);
     return 'apple';
     }
     
   async function getBanana() {
     await delay(3000);
     return 'banana';
     }
     
    async function pickFruits() {
    try {
      const apple = await getApple();
      const banana = await getBanana();
      return `${apple} + ${banana}`;
       }
      catch {
         //error 처리
       }
      }
      
    pickFruits().then(console.log)

🧾 delay 함수 짜보기!

 function delay(ms) {
  return new Promise((resolve) =>
      setTimeout(()=>resolve(ms), ms*1000))
    }
    
   //then 사용
  delay(2).then(text => alert(text))
    
 // async await 사용
 async function alertText () {
     const text = await delay(2);
     alert(text);
     }
     
alertText()