async와 await

async & await란?

async 와 await는 자바스크립트의 비동기 처리 패턴 중 하나입니다. 기존 콜백 함수와 프로미스의 단점을 보완하고 쉽게 사용할 수 있게 해주는 문법입니다.

예시와 함께 이해하기

위에 말했듯이 async와 await는 말그대로 쉽게 사용하게 도와주는 문법입니다.

//비동기 처리를 콜백으로
function logName() {
  const user = fetchUser('url주소', function(user){
   if (user.id === 1) {
    console.log(user.name);
  } 
  });
}

위 같은 함수 logName는 일반적으로 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있습니다. 하지만 async와 await를 이용하면

//async와 await 사용
async function logName() {
  const user = await fetchUser('url주소')
   if (user.id === 1) {
    console.log(user.name);
  } 
}

이렇게 알아보기 쉽게 간단히 사용할 수 있습니다.

async & await 기본 문법

먼저 함수의 앞에 async라는 예약어를 붙입니다. 그리고 나서 함수의 내부 로직 중 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다.

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

참고: https://joshua1988.github.io/web-development/javascript/js-async-await/#async--await%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94