async, await

---

📚 Reference

---

javascript.info, https://ko.javascript.info/async-await

참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

---

서론

---

async, await 키워드는 프로미스를 더 가독성 있게 표현해주기 위해 탄생한 문법입니다.

---

async

---

async 키워드는 다음과 같이 사용할 수 있습니다.

async function f() {...};

const af = async () => {...};

async 키워드가 붙은 함수는 반드시 프로미스를 반환합니다.

async function f() {
  return 1;
}

console.log(f());

>> Promise {<fulfilled>: 1}

---

await

---

await 키워드는 async 키워드가 붙은 함수 안에서만 작동하며 다음과 같이 사용할 수 있습니다.

async function f() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000);
  }
  
  // 이 부분에서 프로미스가 이행될 때까지 기다립니다.
  const result = await promise;
                              
  console.log(result); // "완료"
}

함수를 호출하고, 함수 본문이 실행되는 도중에 await 키워드를 가진 줄에서 실행이 잠시 중단되었다가 프로미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력됩니다.

프로미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

---

에러 핸들링

---

프로미스가 정상적으로 이행되면 await promise는 프로미스 객체의 result에 저장된 값을 반환합니다. 반면 프라미스가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져집니다.

async function f() {
  await Promise.reject(new Error("에러 발생!"));
}

위 코드는 아래 코드와 동일합니다.

async function f() {
  throw new Error("에러 발생!");
}

await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try..catch를 사용해 잡을 수 있습니다.

async function f() {
  try {
    const response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    console.log(err); // TypeError: failed to fetch
  }
}

f();

에러가 발생하면 제어 흐름이 catch 블록으로 넘어갑니다. 여러 줄의 코드를 try로 감싸는 것도 가능합니다.

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

f();

try..catch가 없으면 아래 예시의 async 함수 f()를 호출해 만든 프로미스가 거부 상태가 됩니다. f()에 .catch를 추가하면 거부된 프로미스를 처리할 수 있습니다.

async function f() {
  const response = await fetch('http://유효하지-않은-url');
}

// f()는 거부 상태의 프라미스가 됩니다.
f().catch(alert); // TypeError: failed to fetch // (*)

---

요약

---

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

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

• 함수 안에서 await 키워드를 사용할 수 있습니다.

프로미스 앞에 await 키워드를 붙이면 자바스크립트는 프로미스가 처리될 때까지 대기합니다. 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어집니다.

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

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

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