async와 await

• async/await 문법을 사용하면 promise.then 방식보다 프로미스를 좀 더 편하고 가독성 있는 방식으로 사용할 수 있다.

1. async 함수

• 함수 정의시 async 키워드를 사용하여 async 함수를 정의할 수 있다.
• async 함수는 항상 프로미스를 반환하게 된다.
  • 만약 함수 내부에서 프로미스가 아닌 값을 반환하더라도, async 함수는 자동으로 이행 상태의 프로미스(resolved promise)로 값을 감싸 이행된 프로미스가 반환되도록 한다.
• async 함수의 또다른 기능은 내부에서 await 키워드를 사용할 수 있다는 것이다. await는 async 함수 안에서만 사용할 수 있다.

예시

async function f1() {
  return 1; // 값 반환
}
async function f2() {
  return Promise.resolve(1); // 명시적 프로미스 반환
}

f1().then(alert); // 1
f2().then(alert); // 1

2. await

• await 키워드를 프로미스 객체와 함께 사용하면 자바스크립트가 해당 프로미스가 resolve되어 fulfillment value를 리턴할때까지 “기다리도록” 만들 수 있다.
  • 즉 await expression의 리턴 값은 프로미스가 아니라 해당 expression(보통 프로미스 / thenable object)의 이행 결과값이다.
  • 덕분에 더 편하게 프로미스를 다룰 수 있는 측면이 있다. 예를들면 fetch등을 사용할때 특히.

**async** function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  let result = **await** promise; // 프라미스가 이행될 때까지 기다림 (*)
  
  alert(result); // "완료!"
}

f();

• 예를들어 위 코드에서 promise 앞에 await 키워드가 있기 때문에, 프로미스가 resolve 되어 결과 값을 반환할때까지 자바스크립트는 다음 줄로 넘어가지 않고 기다린다. (다음 줄의 alert이 바로 실행되지 않음)

• 만약 프로미스의 이행이 완료되면, 그때 결과값을 리턴한다. 따라서 result에는 1초 후에 “완료!” 라는 값이 담기게 되는 것이다.

  • 그리고 이 과정이 완료가 되고 나서야 코드의 다음 줄을 실행하게 된다.
  • 즉 alert(result)가 그 다음에 실행되게 되는데, 이때 result는 이미 이행된 프로미스로부터 “완료!”라는 값을 가지고 있는 상태인 것이다.

• await에 의해 프로미스가 처리되길 기다리는 동안에 JS 엔진은 여전히 다른 일(e.g. 다른 스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에 모든게 중단되고 CPU 리소스가 낭비되는 것은 아니라고 한다.

• await는 반드시 async 안에서만 사용이 가능하다는 점을 유의하자.

  • ES13부터 top-level await이 가능하도록 업데이트 되긴한듯? 그래도 아직 주류는 아닌 느낌인거 같다.

• await 역시 promise.then처럼 thenable 객체를 사용할 수 있다고 한다. 자세한 것은 여기 참고

• Promise.all과도 함께 사용할 수 있다.

  // 프라미스 처리 결과가 담긴 배열을 기다립니다.
  let results = await Promise.all([
    fetch(url1),
    fetch(url2),
    ...
  ]);
  

예시

• 프로미스 체이닝때 사용했던 showAvatar() 예시 코드를 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();