TIL 55일차_비동기처리3: async & await

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 비동기_처리_메서드_명();
}

1. 함수의 앞에 async라는 예약어를 붙인다.
2. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드앞에 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]
}

먼저, fetchItems() 함수는 프로미스 객체를 반환한다. 프로미스가 이행(resolved)되며 items가 반환된다.
logItems()함수는 async, await 문법을 사용한 비동기처리이다.
만약 이둘을 사용하지 않았다면 콜백함수나 .then() 등을 사용해서 비동기에 대한 사고를 했어야 한다.

async & await 예외 처리

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

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

참고: 캡틴판교