JavaScript 및 TypeScript에서 비동기 작업을 처리할 때, async 및 await 키워드를 사용하여 동기식 코드와 유사한 방식으로 코드를 작성할 수 있습니다. 이를 통해 코드를 더 읽기 쉽고 유지보수하기 편하게 만들 수 있습니다.

async/await의 사용 방법

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

async function processData() {
  try {
    const data = await fetchData();
    console.log('데이터 처리 완료: ', data);
  } catch (error) {
    console.error('데이터 처리 중 오류 발생: ', error);
  }
}

async 함수

위 예제에서 fetchData와 processData 함수는 async 키워드로 정의되어 있습니다. 이를 통해 비동기 작업을 수행하는 함수임을 나타냅니다.

await 표현식

await 키워드는 Promise가 처리될 때까지 코드의 실행을 일시 중지합니다. 즉, fetch 또는 다른 비동기 작업의 결과가 준비될 때까지 기다린 후 다음 코드를 실행합니다.

오류 처리

try와 catch를 사용하여 비동기 작업 중 발생하는 오류를 처리할 수 있습니다.

이처럼 TypeScript에서 async 및 await를 사용하면 비동기 코드를 동기식으로 작성할 수 있으며, 가독성이 뛰어나고 오류 처리도 편리해집니다.

더 많은 정보는 MDN Web Docs에서 확인할 수 있습니다.