모던 자바스크립트 (promise와 async, await) 9-3. async와 await

async await 문법

: 프라미스를 편하게 사용할 수 있는 문법

 

 

 

async 함수

: function 앞에 위치한 async 키워드를 작성함으로써 사용가능

async function f() {
  return 1;
}

 

 

 

await

: 실행한 프라미스가 처리될 때까지 기다리는 키워드

: async로 작성한 함수를 호출하는 곳에 붙혀 해당 함수의 실행결과를 기다림

: 일반함수에는 사용 불가

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

 

 

 

 

 

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();

 

 

※ await는 최상위 레벨 코드에서는 사용불가

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

: 익명 async 함수로 코드를 감싸면 최상위 레벨 코드에서도 사용 가능

 

 

 

※ await는 thenable 객체를 받음

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // 1000밀리초 후에 이행됨(result는 this.num*2)
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};

async function f() {
  // 1초 후, 변수 result는 2가 됨
  let result = await new Thenable(1);
  alert(result);
}

f();

 

 

 

※ async 클래스 메서드 

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1

 

 

 

 

 

에러핸들링

: async 함수 안에 try catch를 사용하여 핸들링

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-url');
    let user = await response.json();
  } catch(err) {
    // fetch와 response.json에서 발행한 에러 모두를 여기서 잡습니다.
    alert(err);
  }
}

f();

 

 

 

※ async await 문법에서는 .then이 거의 필요하지 않음 (await가 대기를 처리하기 때문)

: 문법제약으로 인해 async 함수 바깥 최상위 레벨 코드에서는 await를 사용할 수 없기 때문에

  그때는 .then/catch를 사용하여 에러를 핸들링

 

 

※ async / await 와 Promise.all

: 여러 개의 프라미스를 기다릴 떄는 같이 혼용

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

 

 

 

 

 

 

Refference

async와 await