[JavaScript - 24] async / await

async

async는 function 앞에 위치합니다.

async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다.

프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

---

await

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

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다.

(await '기다리다’). 결과는 그 이후 반환됩니다.

1초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다.

async function f() {

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

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

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

f();

await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법입니다. 

promise.then보다 가독성 좋고 쓰기도 쉽습니다.

---

유의사항 

📣 일반 함수엔 await을 사용할 수 없습니다.

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

function 앞에 async를 붙이지 않으면 이런 에러가 발생할 수 있습니다.

앞서 await는 async 함수 안에서만 동작합니다.

 

📣 await는 최상위 레벨 코드에서 작동하지 않습니다.

// 최상위 레벨 코드에선 문법 에러가 발생함
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();

promise.then처럼 await에도 thenable 객체(then 메서드가 있는 호출 가능한 객체)를 사용할 수 있습니다. 

thenable 객체는 서드파티 객체가 프라미스가 아니지만 프라미스와 호환 가능한 객체를 제공할 수 있다는 점에서 생긴 기능입니다. 

서드파티에서 받은 객체가 .then을 지원하면 이 객체를 await와 함께 사용할 수 있습니다.

 

📣 async 클래스 메서드

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

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

메서드 이름 앞에 async를 추가하면 async 클래스 메서드를 선언할 수 있습니다.

async 메서드와 async 함수는 프라미스를 반환하고 await를 사용할 수 있다는 점에서 동일합니다.

---

요약 

✅ function 앞에 async 추가하면 두 가지 효과가 있습니다.

1. 함수는 언제나 프라미스를 반환합니다.

2. 함수 안에서 await를 사용할 수 있습니다.

 

✅ 프라미스 앞에 await 키워드를 붙이면 자바스크립트는 프라미스가 처리될 때까지 대기합니다.

처리가 완료되면 조건에 따라 아래와 같은 동작이 이어집니다.

1. 에러 발생 – 예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일함)

2. 에러 미발생 – 프라미스 객체의 result 값을 반환

 

✅ async/await를 함께 사용하면 읽고, 쓰기 쉬운 비동기 코드를 작성할 수 있습니다.

async/await를 사용하면 promise.then/catch가 거의 필요 없습니다. 하지만 가끔 가장 바깥 스코프에서 비동기 처리가 필요할 때같이 promise.then/catch를 써야만 하는 경우가 생기기 때문에 async/await가 프라미스를 기반으로 한다는 사실을 알고 계셔야 합니다. 여러 작업이 있고, 이 작업들이 모두 완료될 때까지 기다리려면 Promise.all을 활용할 수 있다는 점도 알고 계시기 바랍니다.