비동기 코드를 동기적으로 보이게 작성할 수 있습니다.

async function fetchUserData() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
    const details = await axios.get('/user/' + response.data.id + '/details');
    console.log(details);
  } catch (error) {
    console.error(error);
  }
}

image.png

중요한 점은 await가 함수 실행을 일시 중지시키지만, JavaScript 엔진 자체는 멈추지 않는다는 것입니다. 다른 코드는 계속 실행될 수 있습니다. async/await가 비동기 코드를 동기처럼 보여주는 원리는 "해당 함수를 마이크로 태스크 큐에 옮겨놓고 콜스택이 비워졌을 때 실행하기 때문"입니다.

따라서, async/await의 핵심은 비동기 작업의 결과를 기다리는 동안 해당 함수의 실행을 일시 중지하지만, 전체 애플리케이션은 계속 다른 작업을 수행할 수 있도록 하는 것입니다.

왜 비동기 API 요청이 필요한거지?