async, await

Chapter 26 - async/await

컴퓨터/IT학습

async and await

const asyncFn = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve(5), 5 * 1000);
});

const job = async () => {
  try {
    const resolvedResult = await asyncFn();
    console.info(resolvedResult);
  } catch(err) {
    console.error(err);
  } finally {
    console.info("finally");
  }
}

프로미스에 이어서 더 개선된 문법이다. 프로미스의 결과를 await 문법을 활용하여 동기 코드처럼 작성할 수 있다. resolve()를 통해 전달된 결과값은 일반적으로 변수에 할당하듯이 사용하면 된다. 다만 async 키워드로 작성된 비동기 함수 내에서만 사용할 수 있다.

에러 처리도 resolve(), reject(), then(), catch(), finally() 라는 함수 호출형의 복잡성을 줄이고 기본 문법인 try-catch문을 사용하여 가독성을 높일 수 있다.

const asyncFn = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve(5), 5 * 1000);
});

const asyncFn2 = async () => setTimeout(() => resolve(7), 7 * 1000);

async function main() {
  const resolved = await asyncFn();

  asyncFn2()
    .then(res => console.info(res));
}

main()

사실 async 키워드를 사용하여 작성한 함수는 프로미스로 작성한 것과 동일하다. 위 두 함수는 완벽하게 동일하다. 그래서 async 함수를 Promise처럼 .then() 처리할 수도 있고 반대로 Promise를 반환하는 함수는 실행 후 await로 처리할 수 있다.

초판: 2024. 08. 20. 16:03:37