async & await ?

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

async & await가 적용된 코드와 그렇지 않은 코드

function logName() {
  let user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

여기서 fetchUser()라고 하는 코드는 서버에서 데이터를 받아오는 HTTP통신 코드라 가정하자. 일반 적으로 자바스크립트의 비동기 처리 코드는 아래와 같이 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있다.

// 콜백으로 비동기 처리하기
function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  let user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

콜백이 아닌 async & await로 처리 하기

async function logName() {
  let user = await fetchUser('domain.com/users/1');
  
  if (user.id === 1) {
    console.log(user.name);
  }
}

async & await 기본 문법

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

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

일반 적으로 await의 대상이 되는 비동기 처리 코드는 Axios등 프로미스를 반환하는 API호출 함수이다.

예제

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

async function logItems() {
  let resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

async & await 예외 처리

try catch를 사용하면된다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch{}를 사용하면 된다.

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

---

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