async & await

async & await라는 문법을 사용하면 프로미스를 좀 더 편하게 사용할 수 있습니다.

async 함수

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환합니다. 또 프로미스가 아닌 것은 프로미스로 감싸 반환합니다.

async function () {
  return 1;
}

await

await는 async함수 안에서만 동작합니다. 자바스크립트는 await 키워드를 만나면 프로미스가 처리 될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

async function asyncAwait() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('완료'), 1000)
  });
  
  let result = await promise; // 프로미스가 이행될 때까지 기다림
  alert(result) // 완료
}
asyncAwait();

함수를 호출하고, 함수 본문이 실행되는 도중에 await를 만나면 실행이 잠시 '중단' 되었다가 프로미스가 처리되면 실행이 재개됩니다. 이때 프로미스 객체의 결과 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료'가 출력됩니다.

async & await 예외 처리

async & await에서 예외를 처리하는 방법은 바로 try catch입니다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch를 사용하시면 됩니다.
try 안에는 실행된 선언들을 작성하고 catch에는 try블록에서 예외가 발생했을 때 실행될 선언들을 작성해주면 됩니다.

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