🔎 async, await

Promise에서 then형식을 chain 형식으로 사용하는 것보다 가독성이 좋아짐

📌 async

async function getName() {
  return 'mike';
}

getName().then(name=>{
  console.log(name);
});
//mike

함수 앞에 async를 넣으면 항상 promise를 반환

📌 await

async 함수 내부에서만 사용 가능
await 키워드 오른쪽에는 promise가 오고, 그 promise 차례가 될 때까지 기다림

function getName(name){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(name);
    }, 1000);
  });
}

async function showName() {
  const result = await getName('Mike');
  console.log(result);
}

console.log('시작');
showName();
//1초 뒤에 mike가 찍힘

✔️ async, await로 promise코드 바꿔보기

🔗 1. Promise 코드

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('2번 주문 완료);
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

console.log('시작');
f1()
  .then(res => f2(res))
  .then(res => f3(res))  
  .then(res => console.log(res));
  .catch(conole.log)
  .finally(()=>{
    console.log('끝');
  });

🔗 2. async, await 코드

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('2번 주문 완료);
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

async function order(){
    const result1=await f1();
    const result2=await f2(result1);
    const result3=await f1(result2);
    console.log(result3);
    console.log('종료');
  }
order();

//1번 주문 완료 2번 주문 완료 3번 주문 완료 종료 

📌 try catch

🤔 2번에서 오류가 나는 것이라면?
⭐️promise의 catch=> async, await의 try catch⭐️

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      rej('xxx');
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };
                     
async function order(){
    try{
      const result1=await f1();
      const result2=await f2(result1);
      const result3=await f1(result2);
      console.log(result3);
    } catch (e) {
    console.log(e);
  } 
    console.log('종료');
}
order();
//에러 메세지를 찍고 3번으로 넘어가게 됨

✔️ promise.all

비동기 함수를 병렬로 사용할 수 있음

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('2번 주문 완료);
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

async function order(){
    try{
      const result=await Promise.all([f1(), f2(), f3()]);
      console.log(result);
    } catch (e) {
    console.log(e);
  } 
    console.log('종료');
}
order();