[JS] async와 await

Promise의 chaining

→ 콜백 함수에 비해서는 간결하긴 한데 그래도 너무 복잡하지 않나...?

좀 더 간단하게 하는 방법이 없을까?

async와 await를 사용해보자

 

 

 

# async & await

Promise chaining의 가독성 문제를 해결하기 위해 등장

일반적으로 try & catch와 함께 사용한다

 

🔹 async 함수

async 키워드를 함수 앞에 붙여서 비동기 함수를 선언

항상 Promise를 반환한다.

async function process() {
	return result;
}

 

🔹 await 표현식

await 키워드를 async 함수 내에서 사용

비동기 함수의 완료를 기다렸다가, 완료하면 resolve를 통해 전달된 데이터를 반환한다.

 

function placeOrder(menu) {
    return new Promise((resolve) => {
      setTimeout(() => {
        const orderId = Math.floor(Math.random() * 1000) + 1;
        resolve({ orderId, menu })
      }, Math.random() * 2000);
    })
  }

function cook(order) {
return new Promise((resolve, reject) => {
  setTimeout(() => {
    const isCookingSuccessful = Math.random() < 0.8;
    if (isCookingSuccessful) {
      resolve(order)
    } else {
      reject(`주문 실패: ${order.menu} 요리 실패, 다시 주문해주세요.`);
    }
  }, Math.random() * 2000);
})
    
  }
  
function deliver(order) {
return new Promise((resolve, reject) => {
  setTimeout(() => {
    const isDeliverySuccessful = Math.random() < 0.9;
    if (isDeliverySuccessful) {
      resolve(`주문 성공: ${order.menu} 배달 완료!`)
    } else {
      reject(`주문 실패: ${order.menu} 배달 실패, 다시 주문해주세요.`);
    }
  }, Math.random() * 2000);
})
    
  }
  

async function processOrder(orderDetails) {
    try {
      const returnedOrder = await placeOrder(orderDetails.menu)
      console.log(`주문이 생성되었습니다. ${returnedOrder.menu} 요리 주문 ID: ${returnedOrder.orderId}`);

      const cookedOrder = await cook(returnedOrder)
      console.log(`${cookedOrder.menu} 요리 완료!`);

      const status = await deliver(cookedOrder)
      console.log(status)
      console.log("-----------------------------");

    } catch (error) {
      console.error(error)	
    }
}
  
  const orderDetailsList = [
    { menu: "치킨" },
    { menu: "피자" },
    { menu: "샐러드" },
  ];
  
  orderDetailsList.forEach((element) => {
    processOrder(element);
  });