[ES6] async/await

async와 await는 ES8에서 도입되었으며 Promise를 좀 더 쉽게 사용할 수 있다. 또한 가독성이 높게 비동기 처리를 동기처럼 동작할 수 있도록 구현할 수 있다. 

---

async 함수

async 함수는 async라는 키워드를 사용하여 정의할 수 있다. 다음은 async 함수를 다양하게 정의한 것이다. async 함수는 항상 Promise를 반환한다. 아래의 코드처럼 Promise를 반환하지 않더라도 Promise로 감싸서 반환하게 된다.

// 함수 선언문
async function foo() {
  return 1;
}

// 함수 표현식
const foo = async function () {
  return 2;
};

// 화살표 함수
const foo = async () => 3;

 

await 키워드

await 키워드는 반드시 async 함수 내에서만 사용할 수 있다. 코드가 실행되다가 await를 만나면 Promise가 settled될 때까지 기다린 후에 동작한다. 기존에 promise.then()과 같은 역할을 하며 await 키워드가 조금 더 가독성이 높다. 다음 코드는 await 키워드를 사용한 예시이다.

async function foo() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("success");
    }, 500);
  });

  const response = await promise;
  return response;
}

foo().then((res) => {
  console.log(res);
});

위의 코드를 보면 Promise 객체를 선언하였고 0.5초 뒤에 "success"를 반환하도록 하였다. 이를 await 키워드를 통해 모두 실행된 상태(settled)가 될 때까지 기다린 후에 다음 코드를 실행하도록 할 수 있다. 최종적으로 "success"가 출력된다.

 

에러 처리

async 함수 내에서 에러 처리를 알아보자. Promise는 정상적으로 이행되었을 때 resolve에 저장된 값을 반환하지만 에러가 발생하면 reject의 값과 함께 에러가 반환된다. 

async 함수 내에서 try..catch를 통해 에러를 처리할 수 있다. try문 안에 Promise를 생성하였고 오류를 발생시켰다. 따라서 Promise가 거부되어 에러가 반환되고 catch문이 실행된다.

async function foo() {
  try {
    const result = await new Promise((resolve, reject) => {
      reject(new Error("error!!!"));
    });
  } catch (error) {
    console.log(error);
  }
}

foo();

또는 async 함수는 Promise를 반환하기 때문에 catch를 통해 아래와 같이 처리할 수 있다.

async function foo() {
  const result = await new Promise((resolve, reject) => {
    reject(new Error("error!!!"));
  });
  return result;
}

foo()
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });