async & await 이란?

async & await 은 Promise 를 더욱 쉽게 사용할 수 있도록 해주는 ES2017(ES8) 문법입니다. 이 문법을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise 의 앞부분에 await 키워드를 사용합니다. 이렇게 하면 Promise 가 끝날 때 까지 기다리고, 결과 값을 특정 변수에 담을 수 있습니다.

async & await 기본 문법

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

먼저 함수명 앞에 async 예약어를 붙이고, 수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 를 붙입니다.

async & await 예제

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(data => data.json())
  return response;
}

fetchData().then(data => console.log(data));
 // Object {userId: 1, id: 1, title: "delectus aut autem", completed: false}

async & await 예외 처리

async & await 에서 예외를 처리하는 방법은 바로 try catch 입니다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async 에서는 catch {} 를 사용하시면 됩니다.

async function fetchData() {
  try {
  return await fetch('https://잘못된주소');
    
  }catch(error) {
    console.log(error) 
  }
}

fetchData(); // TypeError: Failed to fetch

위의 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 오류까지도 catch 로 잡아낼 수 있습니다. 발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주시면 됩니다.

참고

• 캡틴판교님의 자바스크립트 async와 await
• VELOPERT님의 리액트를 다루는 기술 - 개정판