[typescript] 타입스크립트에서 Axios를 이용하여 HTTP 요청과 응답에 대한 유효성 검사하기

22 Dec 2023

typescript

Axios는 HTTP 클라이언트 라이브러리로, 타입스크립트에서 서버로의 HTTP 요청과 응답에 대한 유효성 검사를 수행하는 데 사용됩니다. 타입스크립트에서 Axios를 사용하여 HTTP 요청을 보내고 응답을 검증하는 방법에 대해 알아보겠습니다.

Axios 설치

먼저, Axios를 설치해야 합니다. 아래 명령어로 프로젝트에 Axios를 설치합니다.

npm install axios

HTTP 요청 보내기

Axios를 사용하여 GET 요청을 보내는 방법은 다음과 같습니다.

import axios, { AxiosResponse } from 'axios';

async function fetchData() {
  try {
    const response: AxiosResponse = await axios.get('https://api.example.com/data');
    if (response.status === 200) {
      console.log(response.data);
    } else {
      console.error('Failed to fetch data');
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위 코드에서 axios.get을 사용하여 GET 요청을 보내고, 응답을 AxiosResponse 타입으로 받아옵니다. 이후 응답 객체의 status를 확인하여 유효성을 검사합니다.

HTTP 응답 검증

응답을 받았을 때 유효성을 검사하려면, 응답 데이터의 타입을 정의하고 타입 가드를 사용하여 검사해야 합니다.

interface Data {
  id: number;
  name: string;
  age: number;
}

async function fetchData() {
  try {
    const response: AxiosResponse<Data> = await axios.get('https://api.example.com/data');
    if (response.status === 200) {
      const data: Data = response.data;
      // 유효성 검사
      if (data.id && data.name && data.age) {
        console.log(data);
      } else {
        console.error('Invalid data');
      }
    } else {
      console.error('Failed to fetch data');
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위 코드에서 Data 인터페이스를 정의하여 응답 데이터의 타입을 명시하고, 해당 타입의 객체로 응답 데이터를 받아온 후 유효성을 검사합니다.

Axios를 이용하여 HTTP 요청과 응답에 대한 유효성 검사는 코드의 신뢰성을 높이고, 안정적인 웹 애플리케이션을 개발하는 데 도움이 됩니다.

더 많은 정보를 원하시거나 Axios에 대해 더 배우고 싶다면 Axios 공식 문서를 참고하세요.