TypeScript를 사용하여 클라이언트 측에서 HTTP 요청을 보내는 경우, async/await 패턴을 사용하여 비동기적으로 데이터를 가져오는 것이 일반적입니다. 이를 위해 axios와 node-fetch와 같은 HTTP 클라이언트 라이브러리를 사용할 수 있습니다. 이번 블로그에서는 axios와 node-fetch를 TypeScript 프로젝트에서 async/await와 함께 어떻게 사용하는지 살펴보겠습니다.

Axios 사용하기

Axios는 Promise 기반 HTTP 클라이언트 라이브러리로, Node.js와 브라우저에서 사용할 수 있습니다.

import axios from 'axios';

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

fetchData();

fetchData 함수에서 await axios.get을 사용하여 데이터를 가져오고, 오류 처리를 위해 try/catch 블록을 사용합니다.

Node-fetch 사용하기

Node-fetch는 Fetch API의 Node.js 버전으로, 브라우저 Fetch API와 유사한 API를 제공합니다.

import fetch from 'node-fetch';

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

Node-fetch를 사용하여 데이터를 가져올 때, await fetch를 사용하고 나중에 response.json()을 호출하여 데이터를 추출합니다.

결론

이번 포스트에서는 TypeScript 프로젝트에서 async/await와 함께 axios와 node-fetch를 사용하여 HTTP 요청을 보내는 방법을 살펴보았습니다. 이러한 방법들은 코드를 간결하게 작성할 수 있고, 비동기적인 요청을 처리하기에 유용합니다.

이러한 HTTP 클라이언트 라이브러리의 자세한 사용법 및 옵션에 대해 더 알아보려면 해당 라이브러리의 문서를 참조하시기 바랍니다.

참조:

• Axios 문서
• Node-fetch GitHub 레포지토리