async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async & await 문법

함수의 앞에 async라는 예약어를 붙인다

async function myFuc() {
    await myAsyncMethod();
}

그리고 비동기 처리 메소드 앞에 await를 붙인다. 메소드는 꼭 프로미스 객체를 반환해야한다. ( Axios 등등 )

async & await 예외 처리

프로미스에서의 예외처리와 비슷하게 async에서는 catch {} 를 사용한다

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

이렇게하면 통신오류, 타입오류등의 여러 오류들을 잡아내 디버깅을 할수있다. 발견된 오류는 error 객체에 담기게된다.

앞으로 더 프런트엔드의 이벤트와 데이터 처리가 많아질 것이기 때문에 async await에 대해서 정확히 알아놓으면 도움이 많이 되것이다.

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