[JavaScript] async await

Main·2023년 5월 11일
0
post-thumbnail

async await ?

기존 콜백함수와 프로미스의 비동기처리 방식을 보완하고, 좀 더 보기 편하게 개선한 Syntactic sugar 문법입니다.

async와 await 사용 예시

1 ) 기존 promise 사용

const orderchicken = new Promise((resolve, reject)=>{
if(Math.random() < 0.5){
	setTimeout(()=>{
  	resolve('정상적으로 주문이 완료되었습니다.');
  }, 1000)
}
else {
setTimeout(()=>{
  	reject('주문량이 너무 많아 주문을 받지 못하였습니다.');
  }, 1000)	
}
}).then(res=>{
	console.log(res);
}).catch(error => {
console.log(error);
}).finally(()=>{
	console.log("주문 종료");
})

2 ) async await 사용

const orderChicken = async () => {
  try {
    const result = await new Promise((resolve, reject) => {
      if (Math.random() < 0.5) {
        setTimeout(() => {
          resolve('정상적으로 주문이 완료되었습니다.');
        }, 1000);
      } else {
        setTimeout(() => {
          reject('주문량이 너무 많아 주문을 받지 못하였습니다.');
        }, 1000);
      }
    });
    console.log(result);
  } catch (error) {
    console.log(error);
  } finally {
    console.log("주문 종료");
  }
};
orderChicken();

위 코드와 같이 asynce를 붇이면 비동기 처리를 마치 동기적으로 처리하는 것처럼 보기 쉽고 직관적으로 처리할 수 있습니다.

async await 사용법

  • fuction 앞에 async 키워드를 붙여줍니다.
  • await는 async 함수 또는 모듈에서만 사용 가능합니다.
  • Promise 객체 앞에는 await 키워드를 붙여줍니다.
  • await를 붙이면 Promise 완료될때 까지 기다리게 됩니다.
  • await는 promise가 resolve한 값을 반환합니다.
  • 예외 처리는 try ~ catch문을 이용합니다.
profile
개선하고 탐구하는 개발자 / 현재 노션으로 이동하였습니다.

0개의 댓글