[JavaScript] async/await 알아보기

앞선 글에서 Promise의 개념과 사용법에 대해 알아보았다.

하지만 실제로 코드를 작성하다 보면 Promise에는 단점이 존재한다.

바로 .then() 혹은 .catch()를 계속 사용해줘야 한다는 점이다.

 

이 방식은 비동기 작업이 많아질수록 코드가 길어지고, 가독성도 떨어지는 문제를 야기한다.

예를 들어 다음과 같은 코드가 있다고 생각해보자.

// Promise 사용
const fetchData2 = () => {
  return new Promise((resolve) => {
    resolve("🔥 성공!");
  });
};

fetchData2().then((result) => {
  console.log(result); // 🔥 성공!
});

코드가 짧아보일 수도 있지만, 실제 프로젝트에서 에러 처리를 포함한 여러 작업을 처리하려면
.then().then().catch()처럼 체이닝이 반복되며 복잡도가 높아진다.

---

이러한 불편함을 해결하기 위해 등장한 것이 바로 async/await이다.

 

사실 async는 내부적으로 Promise를 반환한다.
즉, async는 Promise를 감싸고 있는 선물상자와도 같다.

아래는 같은 기능을 async/await으로 작성한 코드이다.

// async 사용
const fetchData = async () => {
  return "🔥 성공!";
};

const result = async () => {
  const final = await fetchData();
  console.log(final); // 🔥 성공!
};

result();

 

이렇게 await을 통해 비동기 작업의 결과를 마치 동기식 코드처럼 작성할 수 있다.
또한 try/catch와 함께 쓰면 에러 처리도 훨씬 간결하게 할 수 있어 가독성과 유지보수 면에서 큰 장점이 된다.

---

연속된 비동기 작업도 async/await으로 깔끔하게 가능!

 

예를 들어, 사용자의 요청 상태를 단계별로 출력해야 한다고 가정해보자.

 

Promise만 사용할 경우 .then() 체이닝이 계속 이어져서 코드가 지저분해질 수 있지만,
async/await을 사용하면 순차적인 흐름처럼 코드를 짤 수 있어 훨씬 읽기 쉽고 관리하기 편해진다.

 

아래 코드처럼 async와 await을 사용하면

const sendDelayedMessage = (ms, message) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(message);
    }, ms);
  });
};

const userReq = async () => {
  const res = await sendDelayedMessage(1000, "고객님의 요청 완료 되었습니다.\n");
  const res1 = await sendDelayedMessage(2000, "요청을 처리 중입니다.\n잠시만 기다려주세요.\n");
  const res2 = await sendDelayedMessage(3000, "고객님의 요청이 정상적으로 완료되었습니다.");

  console.log(res);
  console.log(res1);
  console.log(res2);
};

userReq();

1. 작업의 순서가 자연스럽고
2. 에러 처리도 try/catch로 직관적이며
3. 가독성도 매우 뛰어나다

---

❗️await의 진짜 역할은?

 

많은 사람들이 await을 단순히 "기다린다"라고만 생각하곤 한다.
하지만 await은 그 이상으로 Promise에 감싸진 값을 꺼내서 사용할 수 있게 해주는 언랩(unwrapping) 역할도 한다.

 

예를 들면,

const getMessage = () => {
  return new Promise((resolve) => {
    resolve("감싸진 메시지");
  });
};

const show = async () => {
  const result = getMessage(); // await을 사용하지 않음
  const result_use_await = await getMessage(); // 여기서 await이 Promise의 값을 '꺼내줌'
  
  console.log(result); // 감싸진 메시지
  console.log(result_use_await); // 꺼내진 메시지
};

show();

[실행 결과]

이렇게 await은 Promise에 감싸진 메시지를 꺼내주는 역할도 한다.