November 18, 2021

async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. async/await는 놀라울 정도로 이해하기 쉽고, 사용법도 어렵지 않습니다.

await 문법은 다음과 같습니다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

프라미스 체이닝 챕터의 showAvatar() 예시를 async/await를 사용해 다시 작성해봅시다.

1. 먼저 .then 호출을 await로 바꿔야 합니다.
2. function 앞에 async를 붙여 await를 사용할 수 있도록 해야 합니다.

async function showAvatar() {

  // JSON 읽기
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github 사용자 정보 읽기
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // 아바타 보여주기
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // 3초 대기
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();

요약

function 앞에 async 키워드를 추가하면 두 가지 효과가 있습니다.

1. 함수는 언제나 프라미스를 반환합니다.
2. 함수 안에서 await를 사용할 수 있습니다.