[typescript] `async/await` 키워드를 사용할 때 에러 핸들링은 어떻게 처리할 수 있나요?

15 Dec 2023

typescript

async/await를 사용하는 함수 내에서 try/catch 블록을 사용하여 에러를 처리할 수 있습니다. 아래 예시를 통해 자세히 살펴보겠습니다.

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);
  }
}

위의 코드에서 fetchData 함수 내에서 try 블록 안에서 비동기 작업을 수행하고, 에러가 발생한 경우 catch 블록에서 적절한 에러 핸들링을 할 수 있습니다.

또한, async/await를 사용하는 함수를 호출한 곳에서도 에러를 처리할 수 있습니다. 아래 예시를 통해 더 자세히 알아보겠습니다.

async function fetchData(url: string): Promise<void> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  const data = await response.json();
  console.log(data);
}

async function fetchDataHandler() {
  try {
    await fetchData('https://api.example.com/data');
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위의 코드에서 fetchData 함수에서는 response.ok를 확인하여 에러를 throw하고, fetchDataHandler 함수에서는 fetchData 함수 호출 시 발생한 에러를 catch블록을 통해 처리하고 있습니다.

이와 같이 async/await를 활용하여 에러 핸들링이 가능하며, 코드를 보다 간결하고 가독성 있게 작성할 수 있습니다.

더 많은 정보를 원하시면 아래 문서를 참고하시기 바랍니다: MDN Web Docs - async function