Axios를 사용하여 HTTP 요청을 보낼 때 네트워크 또는 서버 문제로 인해 응답이 지연되거나 실패할 수 있습니다. 이러한 경우 응답에 대한 취소와 재시도 기능을 추가하여 안정적인 네트워크 요청을 보장할 수 있습니다. 이 글에서는 TypeScript로 Axios를 사용하여 응답에 대한 취소와 재시도를 처리하는 방법에 대해 알아보겠습니다.

Axios란 무엇인가?

Axios는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. 비동기 방식으로 HTTP 요청을 처리하며, JSON 데이터를 자동으로 변환하는 기능을 제공합니다.

Axios 설치하기

먼저, Axios를 프로젝트에 설치해야 합니다. npm을 사용한다면 다음 명령어로 설치할 수 있습니다.

npm install axios

요청에 대한 취소 처리하기

Axios는 응답을 취소할 수 있는 기능을 제공합니다. 예를 들어, 요청 시 특정 시간 내에 응답을 받지 못하면 요청을 취소하는 기능을 구현할 수 있습니다. 아래는 해당 예제 코드입니다.

import axios, { CancelToken } from 'axios';

// 취소 토큰 생성
const source = axios.CancelToken.source();

// Axios 요청
axios.get('/api/user', {
  cancelToken: source.token,
})
  .then((response) => {
    // 성공 시 처리
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      // 요청이 취소된 경우 처리
    } else {
      // 기타 오류 처리
    }
  });

// 요청 취소
source.cancel('Request canceled');

위 코드에서 CancelToken을 사용하여 취소 토큰을 생성하고, 요청 시 해당 토큰을 전달하여 응답을 취소할 수 있습니다.

요청에 대한 재시도 처리하기

때로는 네트워크 문제 때문에 요청이 실패할 수 있습니다. 이때, 요청을 재시도하는 기능을 추가하여 안정적인 네트워크 요청을 보장할 수 있습니다. 다음은 TypeScript에서 Axios를 사용하여 요청에 대한 재시도를 처리하는 방법입니다.

import axios from 'axios';

const maxRetries = 3;
let retries = 0;

function requestWithRetry() {
  axios.get('/api/data')
    .then((response) => {
      // 성공 시 처리
    })
    .catch((error) => {
      if (retries < maxRetries) {
        retries++;
        requestWithRetry();
      } else {
        // 재시도 횟수 초과 시 처리
      }
    });
}

requestWithRetry();

위 코드에서 requestWithRetry 함수를 정의하여 요청이 실패할 경우 재시도하고, 최대 재시도 횟수를 초과하면 적절하게 처리할 수 있습니다.

마무리

Axios를 사용하여 응답에 대한 취소와 재시도를 처리하는 방법에 대해 알아보았습니다. 안정적인 네트워크 요청을 보장하기 위해 취소와 재시도 기능은 매우 유용하며, 이를 활용하여 원활한 네트워크 통신을 구현할 수 있습니다.

참고 자료: Axios 공식 문서