[typescript] async/await와 try-catch 문의 조합

08 Dec 2023

typescript

TypeScript에서 async/await와 try-catch 문을 함께 사용하는 것은 비동기 작업을 수행하고 예외를 처리하는 효율적인 방법입니다.

이 문서에서는 어떻게 async/await 키워드와 try-catch 문을 사용하여 안정적이고 가독성 있는 비동기 코드를 작성하는지에 대해 살펴보겠습니다.

1. async/await 소개

async/await는 JavaScript 및 TypeScript의 비동기 처리를 위한 패턴 중 하나로, ES2017부터 도입되었습니다. 이 패턴을 사용하면 비동기 코드를 동기식 코드처럼 작성할 수 있습니다.

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

2. try-catch와 await

try-catch 문은 await 키워드로 실행되는 비동기 함수에서 발생할 수 있는 예외를 처리하는 데 사용됩니다.

async function fetchData() {
  try {
    let data = await fetch('https://api.example.com/data');
    return data.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // 예외를 상위 호출자에게 전파
  }
}

3. async/await와 Promise.reject()의 차이

async/await를 사용하면 try-catch 블록을 통해 예외를 처리할 수 있습니다. 반면에 Promise.reject()를 사용하는 경우에는 명시적으로 예외를 처리해야 합니다.

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

// Promise.reject()를 사용하는 경우
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
      return Promise.reject(error);
    });
}

async/await 및 try-catch 문을 사용하면 비동기 코드를 작성하고 예외를 처리하는 데 훨씬 편리하고 가독성이 높아집니다.

이상으로 TypeScript에서 async/await와 try-catch 문의 조합에 대한 내용을 알아보았습니다. 만약 추가적인 질문이 있으시다면 언제든지 문의하시기 바랍니다.

1. async/await 소개

2. try-catch와 await

3. async/await와 Promise.reject()의 차이

참고자료