자바스크립트 비동기 처리 3 - Async & Await

Async & Await는 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 비동기 처리 패턴 문법

async & await 기본 문법

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

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

* 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작

예제

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items) // 이행
  });
}

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

fetchItems() 함수는 프로미스 객체를 반환하는 함수, fetchItems() 함수를 실행하면 프로미스가 이행(Resolved)되며 결과 값은 items 배열

logItems() 함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담긴다.

따라서, 콘솔에는 [1,2,3]이 출력

async & await 예외 처리

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

예시

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

발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리

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