본문 바로가기

Front-End/JavaScript

[JavaScript] async-await

async-await

: Javascript의 기존 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하며 보다 간단하게 비동기 처리를 할 수 있도록 하는 것
 
1. 기본 문법
: function 앞에 async 예약어를 붙이고, 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드(Promise객체) 앞에 await를 붙인다.
: 비동기 처리 메서드는 프로미스가 완료될 때까지 기다리며 반드시 프로미스 객체를 반환하므로, then() 메서드를 이용해 결괏값을 반환받을 수 있다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}
//예제
function fetchItems() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var items = [1,2,3];
      resolve(items)
    }, 3000);
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

 
 
2. 예외처리
: async - await의 예외 처리 방법은 try catch를 사용한다.

async function logItems() {
  try{
    var resultItems = await fetchItems();
    console.log(resultItems); // [1,2,3]
   }
   catch(error){
   	console.log(error);
   }
}

 
 
*참고자료
https://joshua1988.github.io/web-development/javascript/js-async-await/