[typescript] 타입스크립트에서 Axios를 이용하여 요청에 대한 로딩 상태 관리하기

22 Dec 2023

typescript

Axios는 많은 프로젝트에서 네트워크 요청을 처리하기 위해 사용되는 인기 있는 라이브러리 중 하나입니다. 이번 글에서는 타입스크립트 환경에서 Axios를 이용하여 네트워크 요청에 대한 로딩 상태를 간단히 관리하는 방법에 대해 알아보겠습니다.

Axios 설치

먼저, 프로젝트에 Axios를 설치합니다. 아직 Axios가 프로젝트에 설치되지 않은 경우 아래 명령어를 사용하여 설치합니다.

npm install axios

인터셉터 설정

인터셉터를 사용하여 모든 요청과 응답에 대해 로딩 상태를 관리할 수 있습니다. 우선, 다음과 같이 Axios의 인터셉터를 설정합니다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

axios.interceptors.request.use((config: AxiosRequestConfig) => {
  // 요청 전 로딩 상태를 설정한다.
  // 예시: 로딩 상태 관리 라이브러리인 Redux를 이용하여 상태 업데이트
  // dispatch({ type: 'START_LOADING' });
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.interceptors.response.use((response: AxiosResponse) => {
  // 응답을 받으면 로딩 상태를 해제한다.
  // 예시: Redux를 이용한 상태 업데이트
  // dispatch({ type: 'STOP_LOADING' });
  return response;
}, (error) => {
  // 에러 시에도 로딩 상태를 해제한다.
  // 예시: Redux를 이용한 상태 업데이트
  // dispatch({ type: 'STOP_LOADING' });
  return Promise.reject(error);
});

위 예시에서 dispatch({ type: 'START_LOADING' }); 와 dispatch({ type: 'STOP_LOADING' });는 Redux를 이용하여 로딩 상태를 관리하는 예시입니다. 실제 프로젝트에서는 해당 코드를 프로젝트의 상태 관리 방식에 맞게 수정해야 합니다.

요청 보내기

이제 Axios를 사용하여 요청을 보낼 때마다 자동으로 로딩 상태를 관리할 수 있습니다.

axios.get('/api/data')
  .then((response) => {
    // 요청이 성공한 경우 처리
  })
  .catch((error) => {
    // 요청이 실패한 경우 처리
  });

마치며

Axios를 활용하여 네트워크 요청에 대한 로딩 상태를 간단히 관리하는 방법에 대해 알아보았습니다. 이를 응용하여 프로젝트에 맞게 로딩 상태를 관리할 수 있습니다.