[typescript] 타입스크립트에서 Axios를 사용하여 다양한 타입의 데이터 전송하기

22 Dec 2023

typescript

Axios는 타입스크립트에서 HTTP 요청을 보내기 위한 인기 있는 패키지 중 하나입니다. 본 블로그에서는 Axios를 사용하여 다양한 타입의 데이터를 전송하는 방법에 대해 알아보겠습니다.

1. GET 요청

가장 간단한 예제로 GET 요청을 보내보겠습니다. 아래의 코드는 JSON 형식의 데이터를 가져오는 GET 요청을 보내는 예제입니다.

import axios from 'axios';

interface UserData {
  id: number;
  name: string;
  email: string;
}

axios.get<UserData>('https://example.com/api/user/1')
  .then(response => {
    const userData: UserData = response.data;
    // 사용자 데이터 활용
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 UserData 인터페이스를 정의하고, axios.get 메서드의 제네릭으로 이를 전달하여, 받아온 데이터의 타입을 명시했습니다. 이로써 Axios는 받아온 데이터를 UserData 타입으로 유추할 수 있습니다.

2. POST 요청

이번에는 POST 요청을 보내는 방법을 알아보겠습니다. 아래의 코드는 JSON 형식의 데이터를 서버로 보내는 POST 요청 예제입니다.

import axios from 'axios';

interface NewUserData {
  name: string;
  email: string;
}

const newUser: NewUserData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

axios.post('https://example.com/api/user', newUser)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 NewUserData 인터페이스를 정의하고, newUser 객체를 생성하였습니다. axios.post 메서드를 통해 서버로 newUser 객체를 전송하게 됩니다.

3. 다른 유형의 데이터 전송

또한 Axios를 사용하여 FormData, Blob 등 다른 유형의 데이터를 전송할 수도 있습니다. 이러한 경우에는 axios의 post 메서드에 두 번째 인수로 해당 데이터를 전달하면 됩니다.

import axios from 'axios';

const formData = new FormData();
formData.append('name', 'John Doe');

axios.post('https://example.com/api/form', formData)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 오류 처리
  });

이처럼 Axios를 사용하여 타입스크립트에서 다양한 유형의 데이터를 전송하는 것은 매우 간단하며, 타입 안정성을 유지하기 위해 인터페이스를 활용할 수 있습니다.

Axios 공식 문서 및 타입스크립트 공식 문서를 참고하시기 바랍니다.

참고 문헌: