async와 await

async/await

정의

Async / Await 문법은 자바스크립트의 비동기 처리 패턴으로 ES7에서 새롭게 지원하는 문법이며, 기존 비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완하고 가독성 좋은 코드를 작성할 수 있게 도와준다

기존 비동기 처리 방식

const printName = () => {
  const getData = fetchData('abc.com/datas/3')
  .then(data => { 
    if (data.id === 3) {
      console.log(data.id); 
    }
  })
}

async/await 방식

const printName = async () => {
  const data = await fetchData('abc.com/datas/3');
  if (data.id === 3) {
    console.log(data.id);
  } 
} 

비동기 처리 방식들의 사용 이유
기존 비동기 처리 방식(callback, promise)과 async/await를 사용하는 이유는 이러한 방식들을 비동기 상황에서 사용하지 않는다면 콜백 함수 또는 기다림의 과정이 끝나기 전에 다음 프로세스로 바로 진행될 수 있기 때문이다

async/await 사용시 주의사항

• 먼저 async 라는 예약어를 함수 앞에 붙이고, await를 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 붙인다
• async 함수의 리턴값은 무조건 프로미스 객체이며, then()과 try&catch 문으로 함수의 흐름을 제어한다
• await 는 Promise 가 fulfilled 가 되든 rejected 가 되든 끝날 때까지 기다리는 함수