[typescript] 타입스크립트에서 Axios를 사용하여 다양한 데이터 형식(JSON, FormData 등) 전송하기

22 Dec 2023

typescript

Axios는 HTTP 클라이언트 라이브러리로, 다양한 데이터 형식을 사용하여 HTTP 요청을 보낼 수 있습니다. 이 블로그에서는 타입스크립트에서 Axios를 사용하여 JSON 데이터와 FormData를 전송하는 방법에 대해 알아보겠습니다.

Axios 및 타입스크립트 설치

먼저, 프로젝트에 Axios를 설치합니다.

npm install axios

또한 타입스크립트와 함께 Axios 타입 정의 파일을 설치합니다.

npm install @types/axios

Axios로 JSON 데이터 전송하기

우선, Axios를 사용하여 JSON 데이터를 전송하는 방법을 살펴보겠습니다. 아래는 Axios를 사용하여 POST 요청을 보내는 예시 코드입니다.

import axios from 'axios';

const sendData = async () => {
  const data = {
    // JSON 데이터
  };

  try {
    const response = await axios.post('https://example.com/api', data);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

sendData();

Axios로 FormData 전송하기

이번에는 Axios를 사용하여 FormData를 전송하는 방법을 살펴보겠습니다. FormData를 사용하여 파일이나 텍스트 데이터를 전송할 수 있습니다. 아래는 FormData를 이용하여 POST 요청을 보내는 예시 코드입니다.

import axios from 'axios';

const sendFormData = async () => {
  const formData = new FormData();
  formData.append('file', file); // 파일 데이터 추가
  formData.append('textData', 'Hello, FormData'); // 텍스트 데이터 추가

  try {
    const response = await axios.post('https://example.com/upload', formData);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

sendFormData();

이제, 여러분은 타입스크립트에서 Axios를 사용하여 JSON 데이터와 FormData를 전송하는 방법을 알게 되었습니다. 이를 통해 다양한 형식의 데이터를 서버로 전송하는 데 유용하게 활용할 수 있을 것입니다.

마지막으로, Axios와 FormData에 대한 더 많은 정보는 공식 문서를 참고하시기 바랍니다.