[JS] async & await

01. async & await 란?

- 자바스크립트의 비동기처리 패턴

- 기존의 비동기 처리 방식인 콜백함수와 프로미스의 단점 보완

 

02. async & await 기본 문법

1. 함수 앞에 async 예약어 붙임

2. 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙임

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

 

03. async & 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() 함수 : 프로미스 객체를 반환하는 함수 

- logItems() : fethcItems() 함수의 결과 값이 resultItems 변수에 담김

 

04. 예외 처리

- try & catch 를 통해 예외를 처리

- 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);
  }
}