async/await 내가 쉽고 재미있게 알려줄게!🤚🏻

async/await는 자바스크립트에서 비동기 작업(돟시에 여러 일 가능)을 훨씬 쉽게 처리할 수 있게 도와주는 도구입니다. Promise를 사용하지만, 마치 동기적으로 코드를 작성하는 것처럼 보이게 만들어주죠. 이 덕분에 코드가 더 깔끔하고 이해하기 쉬워집니다!

AI로 생성해본 그림

---

async와 await

• async 함수는 항상 Promise를 반환합니다. 이 함수 내부에서 비동기 처리를 할 수 있어요. => async는 비동기
• await은 Promise가 완료될 때까지 기다렸다가 그 값을 반환합니다. 단, await은 async 함수 안에서만 사용할 수 있어요. => await는 동기

왜 async/await이 필요한가요? 🤯

비동기 작업을 처리할 때, 콜백 함수나 복잡한 Promise를 사용할 필요가 없습니다. 예를 들어, 아래 두 코드의 차이를 보겠습니다.

Promise 버전

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));

async/await 버전

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}
getData();

코드가 훨씬 읽기 쉬워졌죠? ("전 promise가 더 읽기 편한데요.."라면 아직 익숙치 않은겁니다 하하..;;)

본격적으로 사용하는 법을 알려드릴게요.

---

사용 방법과 주의점 🛠️

1. async 함수 선언하기
async 키워드를 함수 앞에 붙이면 됩니다.

async function myFunction() {
  return 'Hello!';
}

위 함수는 항상 Promise를 반환합니다. 즉, myFunction().then(...)처럼 사용할 수 있죠.

2. await 사용하기
await은 Promise가 완료될 때까지 멈췄다가 그 값을 반환합니다.

async function waitAndGetValue() {
  const value = await new Promise(resolve => setTimeout(() => resolve(42), 1000));
  console.log(value); // 1초 후에 42 출력
}

 

그런데 주의할 점? 꼭 알아야 할게 있어요.

에러 처리!

async/await을 사용할 때는 에러 처리가 필수입니다. try...catch 블록을 사용하면 코드가 깔끔하고 안정적이에요.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('네트워크 응답이 올바르지 않습니다');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}
fetchData();