비동기 작업을 처리할 때 JavaScript 및 TypeScript에서 async 및 await 키워드를 사용하여 코드를 간결하게 만들 수 있습니다. async 및 await는 Promise를 기반으로 하며, 비동기 코드를 동기식으로 작성하는 데 도움이 됩니다.

async/await란?

async 함수는 항상 Promise를 반환합니다. await 키워드는 Promise가 완료될 때까지 함수의 실행을 일시 중지합니다. 이를 통해 비동기 작업을 동기식으로 처리할 수 있습니다.

아래는 TypeScript에서 async/await를 사용하여 HTTP 요청을 처리하는 간단한 예제입니다.

async function fetchData(url: string): Promise<string> {
  try {
    let response = await fetch(url);
    if (response.ok) {
      let data = await response.text();
      return data;
    } else {
      throw new Error('Network response was not ok.');
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

async function displayData() {
  try {
    const data = await fetchData('https://example.com/api/data');
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error displaying data:', error);
  }
}

displayData();

위 코드에서 fetchData 함수는 URL을 인자로 받아 HTTP 요청을 보내고, 응답을 처리합니다. displayData 함수에서 fetchData 함수를 호출하며, async/await를 사용하여 데이터를 가져오고 표시하는 과정에서 발생할 수 있는 오류를 처리합니다.

자동 완료 및 실패 처리

async/await를 사용하면 Promise의 성공 또는 실패에 따라 자동적으로 작업을 처리할 수 있습니다. 성공적으로 완료되면 그에 따른 작업을 처리하고, 실패할 경우에는 적절하게 에러를 처리할 수 있습니다.

try/catch 문을 사용하여 오류를 처리하고, 함수를 호출하는 곳에서도 마찬가지로 try/catch를 사용하여 오류를 처리할 수 있습니다. 이를 통해 코드의 안정성을 높일 수 있습니다.

async/await를 사용하여 코드를 작성하면 오류 처리 방식이 명확해지고, 가독성이 향상됩니다.

결론

TypeScript에서 async/await를 사용하면 비동기 작업을 보다 쉽게 처리할 수 있습니다. 자동 완료 및 실패 처리를 포함하여 코드를 깔끔하게 작성하고 오류를 처리할 수 있습니다. 이는 유지보수가 용이하며 가독성이 좋은 코드를 작성하는 데 도움이 됩니다.

async/await를 보다 자세히 이해하고 활용하기 위해서는 TypeScript 공식 문서를 참고하는 것이 좋습니다.

그럼 모두 행복한 코딩 되세요!