저번 글에서 Promise에 대해 알아보았고 요번에는 그 보다 최신 문법인 async, await에 대해 알아보도록 하려고 한다.

---

async, await

이는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이며 callback()함수와 Promise의 단점을 보완하고 코드의 가독성을 쉽게 해준다.

---

기본예제

다음의 코드는 간단한 async, await 예제이다.
1. Promise 구조를 가진 파라미터(ms)만큼 대기하는 sleep(ms) 함수를 생성 한뒤
2. example()함수에서 async, await 문법을 사용한다.

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function example() {
  console.log("안녕하세요");
  await sleep(1000);
  console.log("1초 뒤에 나타나네요");
}

example();

[code result]

안녕하세요
1초 뒤에 나타나네요

---

사용법

비교적 간단하다. 사용하고 싶은 함수의 앞에 async를 선언해 준뒤 내가 하고 싶은 비동기 처리 메서드(위 코드 에서의 sleep) 앞에 await을 붙여주는 것 이다.

• 주의점 비동기 처리 메서드(코드)는 꼭 Promise를 반환해야 한다.

async function 함수명() {
  await 비동기처리메서드();
}

---

에러 처리

사용하려는 함수에서 에러가 안나면 좋겠지만 요청하는 정보가 없던지 예기치 않은 상황에서 에러가 당연하게 존재하는 법 이다. async, await 문법에서는 이를 해결 하기 위해서 try, catch구문을 사용한다.

에러 처리 : Promise에서 에러 처리를 위해 .catch() 했던 것과 동일하게 catch{} 해서 코드블럭으로 사용한다. 네트워크 오류 뿐만 아니라 간단한 오류까지도 다 잡기 때문에 catch (error)문에 담긴 error 객체에 유형에 맞게 코드를 처리해주면 된다.

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
// 위의 예제와 동일한 대기 함수
async function makeError() {
  await sleep(1000);
  const error = new Error();
  throw error;
}
// makeError 함수를 생성해 error = new Error()로 에러 생성하여 throw로 던지기
async function process() {
  try {
    await makeError();
  } catch (e) {
    console.error(e);
  }
}
// 위에서 던져진 에러를 받기까지 기다린 다음 e에 담은 뒤 콘솔에 에러 출력
process();
// 코드 실행