[typescript] async/await를 사용하여 네트워크 요청 처리 방법

이번 블로그 게시물에서는 TypeScript에서 async/await를 사용하여 네트워크 요청을 처리하는 방법에 대해 알아보겠습니다.

1. 비동기 함수 생성

가장 먼저, async 키워드를 사용하여 비동기 함수를 생성합니다. 이를 통해 함수 내에서 await 키워드를 이용하여 프로미스가 resolve될 때까지 기다릴 수 있습니다.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

위의 코드에서 fetchData 함수는 fetch를 이용하여 네트워크 요청을 보내고, response를 JSON 형태로 파싱한 뒤 데이터를 반환합니다.

2. 비동기 함수 호출

이제 비동기 함수를 호출하는 부분을 살펴봅시다.

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

getData();

getData 함수 내에서 fetchData를 호출하고, await를 사용하여 데이터를 받을 때까지 기다립니다. try/catch 블록을 이용하여 오류를 처리할 수 있습니다.

3. 요약

이처럼 TypeScript에서 async/await를 사용하여 네트워크 요청을 처리할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 오류 처리를 간편하게 할 수 있습니다.

제안 및 피드백은 언제든 환영합니다. 감사합니다!

참고 자료