JS - async, await

출처: https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

1. async, await는 무엇인가?

자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법.

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줌.

 

2. 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 비동기 처리 메서드가 꼭 Promise 객체를 반환해주어야 await가 의도한대로 동작합니다.

 

3. 예제

//Promise 객체를 반환하는 함수
function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

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

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 했을 겁니다. 하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 됩니다. try catch를 적용해 error를 잡아낼 수도 있습니다.