자바스크립트 async await 활용법과 예제

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

현대 웹 개발에서 비동기 프로그래밍은 필수적인 요소입니다. 자바스크립트는 비동기 처리를 위해 다양한 방법을 제공하며, 이 중에서도 async/await는 직관적이고 가독성이 높은 문법으로 널리 사용되고 있습니다. 이 글에서는 async/await의 개념과 사용법, 그리고 이를 활용한 예제를 소개하겠습니다.

async/await란?

async/await는 자바스크립트의 비동기 코드를 작성할 때 사용하는 문법으로, 비동기 처리를 보다 쉽게 작성할 수 있도록 돕습니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 처리될 때까지 기다리게 합니다. 이러한 요소들은 비동기 코드를 마치 동기적으로 작성한 것처럼 보이게 만들므로, 코드의 가독성을 높이는 데 효과적입니다.

async/await의 기본 사용법

async/await를 사용하기 위해서는 먼저 async 함수를 정의해야 합니다. 아래는 그 기본적인 형식입니다:

async function exampleFunction() {
  // 비동기 작업을 수행합니다.
}

그리고 그 함수 안에서 await를 사용하여 비동기 작업을 기다릴 수 있습니다. 예를 들어, API 요청을 통해 데이터를 가져오는 경우를 살펴보겠습니다:

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

위 코드에서는 fetch 메서드를 사용해 데이터를 요청하고, await를 통해 요청 결과를 기다립니다. 이는 비동기 호출을 간편하게 처리하는 예시로, 오류가 발생할 경우 try/catch 구문을 이용해 예외를 처리하는 것도 포함되어 있습니다.

async/await의 장점

• 가독성 향상: 비동기 코드가 마치 동기 코드처럼 작성되어, 이해하기 쉬워집니다.
• 명확한 오류 처리: try/catch 구문을 통한 간단한 오류 관리로 코드가 더 깔끔해집니다.
• 체인 처리 필요 없음: .then()과 .catch() 이어붙임 없이 순차적으로 코드 실행이 가능합니다.

예제: async/await 활용하기

이번에는 실제로 async/await를 사용하여 여러 개의 API 요청을 순차적으로 처리하는 예제를 살펴보겠습니다. 아래 코드는 사용자 정보를 가져온 후, 해당 사용자의 게시물을 추가로 요청하는 상황을 시연합니다:

async function getUserPosts(userId) {
  try {
    const userResponse = await fetch(https://api.example.com/users/${userId});
    const user = await userResponse.json();
    const postsResponse = await fetch(https://api.example.com/posts?userId=${user.id});
    const posts = await postsResponse.json();
    console.log('User:', user);
    console.log('Posts:', posts);
  } catch (error) {
    console.error('Error:', error);
  }
}
getUserPosts(1);

위 예제는 특정 사용자 ID를 기준으로 먼저 사용자의 정보를 가져온 뒤, 해당 사용자의 게시물을 요청하여 콘솔에 출력하는 방식입니다. 각 요청 사이에 await를 사용하여 필요한 데이터를 기다리고, 데이터가 모두 수집된 후에 출력합니다.

마무리

async/await는 자바스크립트에서 비동기 처리를 보다 간결하고 효율적으로 만들어 주는 중요한 도구입니다. 비동기가 필수적인 현대 웹 환경에서 이 문법을 활용하면 코드의 가독성을 높이고, 안정적인 오류 처리를 가능하게 합니다. 비동기 작업이 필요할 때는 async/await를 적극 활용하여, 더욱 깔끔한 코드를 작성해 보시기 바랍니다.

질문 FAQ