자바스크립트에서 async 함수는 비동기적인 작업을 처리하는 유용한 도구입니다. 하지만 이러한 async 함수를 사용하면서 발생할 수 있는 오류를 적절하게 핸들링하는 것은 매우 중요합니다. 이번 블로그 포스트에서는 자바스크립트 async 함수의 에러 핸들링에 대해 알아보겠습니다.

try-catch 문을 사용한 에러 핸들링

가장 기본적인 방법으로, try-catch 문을 사용하여 async 함수 내에서 발생한 오류를 처리할 수 있습니다. 다음은 간단한 예제입니다.

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

위 예제에서는 fetch 함수를 사용하여 데이터를 가져오고, await 키워드를 사용하여 비동기적으로 데이터를 받아옵니다. 만약 데이터를 가져오는 과정에서 오류가 발생하면, try 블록 내부에서 catch 블록으로 제어가 이동하게 됩니다. 오류를 콘솔에 출력하고, 오류를 다시 던져서 상위 호출자도 해당 오류를 알 수 있도록 하고 있습니다.

.catch() 메서드를 사용한 에러 핸들링

try-catch 문 대신에 async 함수에서 .catch() 메서드를 사용하여 에러를 처리할 수도 있습니다. 다음은 위 예제를 .catch() 메서드를 사용하여 변경한 예제입니다.

async function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .catch(error => {
      console.error('Error fetching data:', error);
      throw error;
    });
}

위 예제에서는 fetch 함수의 반환값에 .catch() 메서드를 체인으로 연결하여 오류를 처리하고 있습니다. .catch() 메서드 내부에서 오류를 콘솔에 출력하고, 오류를 다시 던져서 상위 호출자도 해당 오류를 알 수 있도록 하고 있습니다.

try-catch와 .catch()의 차이점

try-catch 문과 .catch() 메서드는 둘 다 async 함수에서 에러를 핸들링하는 방법이지만, 차이점도 있습니다.

• try-catch 문은 한 번에 하나의 오류만 처리할 수 있습니다. 따라서, 여러 개의 비동기 작업을 순차적으로 진행하며, 각각의 오류를 따로 처리해야 할 경우에는 try-catch 문을 사용하는 것이 유용합니다.
• .catch() 메서드는 간단하고 간결한 구문을 제공합니다. 따라서, 하나의 오류만 처리하면 되는 경우에는 .catch() 메서드를 사용하여 코드를 더 깔끔하게 작성할 수 있습니다.

정리

자바스크립트 async 함수에서 발생하는 오류를 적절하게 핸들링하는 것은 중요합니다. try-catch 문을 사용하거나 .catch() 메서드를 이용하여 오류를 처리할 수 있으며, 상황에 맞게 선택하여 사용하는 것이 좋습니다. 적절한 에러 핸들링을 통해 비동기적인 작업을 안정적으로 처리할 수 있습니다.