비동기 처리를 위한 자바스크립트 async 함수

자바스크립트에서 비동기 처리를 위해 대표적으로 사용되는 함수는 setTimeout과 Ajax입니다. 그러나 이러한 함수들은 콜백 지옥과 같은 코드 구조를 유발하여 코드의 가독성과 유지 보수를 저해합니다.

Async 함수란?

비동기 처리를 보다 쉽게 다룰 수 있도록 ES2017부터 async 함수가 도입되었습니다. async 함수를 사용하면 비동기 작업을 기다리는 동안 코드를 일시 중지시킬 수 있으며, 결과에 대한 처리를 보다 간단하게 할 수 있습니다.

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const jsonData = await response.json();
  console.log(jsonData);
}
fetchData();

Async 함수의 특징

• 비동기 처리를 위해 Promise 객체를 반환합니다.
• await 키워드를 사용해 비동기 처리가 끝날 때까지 코드 실행을 일시 중지시킬 수 있습니다.

Async 함수 사용 예시

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const jsonData = await response.json();
    return jsonData;
  } catch (error) {
    console.log(error);
  }
}
fetchData()
  .then(data => console.log(data))
  .catch(error => console.log(error));

fetchData 함수는 Promise 객체를 반환합니다. 이 함수를 호출하면 .then() 메소드로 반환된 데이터를 처리할 수 있습니다. .catch() 메소드를 사용하여 에러 핸들링도 가능합니다.

결론

이번 글에서는 비동기 처리를 위한 자바스크립트 async 함수에 대해 알아보았습니다. async/await 구문을 사용함으로써 가독성이 좋아지고 비동기 처리 코드를 쉽게 작성할 수 있게 되었습니다.

키워드: 자바스크립트 async 함수