자바스크립트 비동기 처리: async/await 사용하기

자바스크립트에서 비동기 처리를 더 쉽게 사용하고 이해하기 위해 async/await가 도입되었습니다. async/await는 자바스크립트의 비동기 처리를 더 쉽고 가독성 있게 만들어주는 문법입니다. 복잡한 비동기 작업을 마치 동기 코드처럼 작성할 수 있어 코드의 가독성이 높아지고 생산성이 향상됩니다. 이 글에서는 async/await의 기본 개념, 사용법, 에러 처리 방법, 그리고 Promise와 함께 사용하는 방법에 대해서 알아보겠습니다.

▼ 목차

1. async/await 이해하기
2. async 함수 작성하기
3. await 사용하기
4. 에러 처리: try-catch 구문 사용
5. async/await와 Promise 함께 사용하기
6. async/await를 사용한 비동기 작업 체이닝

1. async/await 이해하기

async/await는 자바스크립트의 비동기 처리를 더 간결하고 가독성 높게 작성할 수 있게 해주는 문법입니다. async/await는 기본적으로 Promise를 사용하지만 코드를 좀 더 동기적인 방식으로 작성할 수 있게 도와줍니다.

2. async 함수 작성하기

async 함수를 작성하기 위해서는 함수 선언 앞에 async 키워드를 추가합니다. async 함수는 항상 Promise를 반환합니다.

▼ 예제 코드

async function exampleAsyncFunction() {
  // ...
}

3. await 사용하기

await 키워드는 async 함수 내에서만 사용할 수 있고 Promise가 settled 상태가 될 때까지 기다리게 해 줍니다. 이를 통해 동기적인 방식처럼 코드를 작성할 수 있습니다.

▼ 예제 코드

async function fetchUserData() {
  const response = await fetch('https://api.example.com/user');
  const userData = await response.json();
  console.log(userData);
}

4. 에러 처리: try-catch 구문 사용

async/await에서의 에러 처리는 기존의 동기 코드에서와 같이 try-catch 구문을 사용합니다.

▼ 예제 코드

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const userData = await response.json();
    console.log(userData);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

5. async/await와 Promise 함께 사용하기

async/await는 기본적으로 Promise를 사용하기 때문에 Promise와 함께 사용하는 것이 매우 자연스럽습니다.

▼ 예제 코드

async function fetchData() {
  const [users, posts] = await Promise.all([
    fetch('https://api.example.com/users').then((res) => res.json()),
    fetch('https://api.example.com/posts').then((res) => res.json())
  ]);

  console.log(users, posts);
}

6. async/await를 사용한 비동기 작업 체이닝

Promise를 사용할 때보다 더 간결하게 비동기 작업을 체이닝 할 수 있습니다.

▼ 예제 코드

async function processData() {
  const firstResult = await firstAsyncFunction();
  const secondResult = await secondAsyncFunction(firstResult);
  const finalResult = await thirdAsyncFunction(secondResult);

  console.log(finalResult);
}

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

관련 이전 게시글

자바스크립트 비동기 처리: Promise 사용하기