Axios Retry로 API 요청 마스터하기: 종합 가이드

상상해 보세요: 당신은 세련된 웹 애플리케이션을 구축하고 있습니다. 프론트 엔드는 완벽하게 보이고, 사용자 경험은 매끄럽고, 모든 것이 제자리에 있는 것 같습니다. 그러나 갑자기 API 호출이 간헐적으로 실패하기 시작합니다. 이는 모든 개발자에게 악몽 같은 상황입니다. 그렇다면 해결책은 무엇일까요? Axios 재시도 요청이 등장합니다. 이 블로그 포스트에서는 귀찮은 네트워크 오류를 우아하게 처리하기 위해 Axios 재시도 요청을 구현하고 최적화하는 방법을 살펴보겠습니다. 그리고 마지막에, 당신은 API 요청을 챔프처럼 처리하는 전문가가 될 것입니다!

💡

자세한 내용을 살펴보기 전에, 당신의 삶을 더욱 쉽게 만들어 줄 것이 있습니다. API 개발 및 테스트를 단순화하도록 설계된 강력한 도구인 Apidog을 확인해 보세요. 그리고 가장 좋은 점은 Apidog이 무료로 제공된다는 것입니다.

button

왜 Axios인가요?

우선, API 요청에 대해 왜 Axios를 사용해야 할까요? Axios는 JavaScript를 위한 프로미스 기반 HTTP 클라이언트입니다. 사용 편의성과 다재다능성으로 인기를 얻고 있으며, 백엔드와 서드파티 API 모두에 요청을 할 수 있게 해줍니다. 모든 HTTP 메서드를 지원하며 Node.js와 브라우저 애플리케이션과 원활하게 작동합니다. 게다가 인터셉터, 자동 JSON 데이터 변환, 그리고 가장 중요한 재시도 요청과 같은 유용한 기능들이 포함되어 있습니다.

신뢰할 수 없는 네트워크의 문제

API 호출에 의존하는 애플리케이션에서 작업하고 있다고 상상해 보세요. 날씨 앱, 소셜 미디어 대시보드 또는 제품 세부정보를 가져오는 전자 상거래 사이트일 수 있습니다. 사용자는 실시간 데이터를 기대합니다. 그러나 네트워크 안정성은 예측할 수 없습니다. 짧은 서버 일시 중단이나 경미한 네트워크 결함은 API 요청 실패를 초래할 수 있습니다. 이때 Axios 재시도 요청이 구출작용을 하여 귀하의 애플리케이션이 실패한 요청을 자동으로 재시도하고 전체 사용자 경험을 향상시킵니다.

Axios 설정하기

재시도 요청을 구현하기 전에, 프로젝트에서 Axios를 설정해야 합니다. 이미 Axios를 설치하지 않았다면 npm이나 yarn을 사용하여 설치할 수 있습니다:

npm install axios

또는

yarn add axios

설치한 후에는 Axios를 가져오고 API 요청을 시작할 수 있습니다. 다음은 간단한 예입니다:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

Axios Retry 소개

그러면 Axios가 실패할 때 요청을 어떻게 재시도하게 할 수 있을까요? 그 답은 Axios 인터셉터에 있습니다. 인터셉터를 사용하면 요청이 전송되기 전 또는 응답을 받기 후 코드 실행 또는 요청/응답 수정을 할 수 있습니다. 요청을 재시도하기 위해 요청 인터셉터를 사용할 것입니다.

우리는 재시도를 구현하는 것을 간단하게 만들어 줄 추가 패키지인 axios-retry를 설치해야 합니다. npm이나 yarn을 사용하여 설치하십시오:

npm install axios-retry

또는

yarn add axios-retry

다음으로, 프로젝트에서 Axios 재시도를 설정해 보겠습니다:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, { retries: 3 });

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

이 예에서 우리는 Axios가 실패한 요청을 최대 세 번 재시도하도록 설정했습니다. 그게 전부입니다!

Axios Retry 사용자 정의

기본 설정도 훌륭하지만, Axios 재시도로 훨씬 더 많은 일을 할 수 있습니다. 예를 들어, 오류 유형에 따라 재시도 로직을 사용자 정의하거나, 재시도 간 지연을 추가하거나, 지수 백오프를 구현할 수 있습니다.

사용자 정의 재시도 로직

네트워크 오류 또는 특정 상태 코드에서만 재시도하도록 재시도 로직을 사용자 정의해 보겠습니다:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.response.status === 500 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

이 예에서는 응답 상태가 500이거나 네트워크 오류인 경우 Axios가 요청을 재시도합니다.

재시도 간 지연 추가

빠른 연속으로 요청을 보내는 서버를 폭격하지 않기 위해 재시도 간 지연을 추가할 수 있습니다. 방법은 다음과 같습니다:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 1000; // 재시도 간 1초 지연
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

이 설정은 재시도 간 1초 지연을 도입합니다.

지수 백오프

더 정교한 접근 방식을 원한다면, 각 재시도에 따라 지연을 지수적으로 증가시키는 지수 백오프를 사용하는 것을 고려해 보세요. 이는 서버가 회복할 수 있는 여유를 주는 데 특히 유용할 수 있습니다.

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

특정 HTTP 메서드 처리하기

때때로 특정 HTTP 메서드만 재시도할 수 있습니다. 기본적으로 axios-retry는 GET 요청을 재시도하지만, 이를 사용자 정의할 수 있습니다.

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  shouldResetTimeout: true,
  retryCondition: (error) => {
    return axiosRetry.isRetryableError(error) && error.config.method === 'get';
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기 오류:', error);
  });

실제 사용 사례: API에서 데이터 가져오기

이 모든 것을 함께 연결해 보겠습니다. 제3자 API에서 데이터를 가져오는 날씨 앱을 개발하고 있다고 상상해 보세요. 네트워크 문제는 흔하며 사용자의 원활한 경험을 보장하고 싶습니다.

다음은 날씨 앱에서 Axios 재시도를 구현하는 방법입니다:

import axios from 'axios';
import axiosRetry from 'axios-retry';

// Axios 재시도 설정
axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return error.response.status === 503 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

// 날씨 데이터 가져오기 함수
const fetchWeatherData = async (city) => {
  try {
    const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
    return response.data;
  } catch (error) {
    console.error('날씨 데이터 가져오기 오류:', error);
    throw error;
  }
};

// 사용 예
fetchWeatherData('San Francisco')
  .then(data => {
    console.log('날씨 데이터:', data);
  })
  .catch(error => {
    console.error('재시도 후 날씨 데이터 가져오기 실패:', error);
  });

이 예에서는 네트워크 오류 또는 503 상태 코드에 대해 Axios가 세 번까지 요청을 재시도하도록 설정했습니다.

Apidog: Axios 코드를 생성하기 위한 무료 도구

Apidog는 올인원 협업 API 개발 플랫폼으로, API 설계, 디버깅, 테스트, 게시 및 모킹을 위한 포괄적인 도구 키트를 제공합니다. Apidog는 HTTP 요청을 만들기 위한 Axios 코드를 자동으로 생성할 수 있도록 해줍니다.

button

다음은 Apidog를 사용하여 Axios 코드를 생성하는 과정입니다:

1단계: Apidog를 열고 새 요청을 선택합니다.

2단계: 요청을 보낼 API 엔드포인트의 URL을 입력하고, 요청에 포함할 헤더나 쿼리 문자열 매개변수를 입력한 후 "디자인"을 클릭하여 Apidog의 디자인 인터페이스로 전환합니다.

3단계: "클라이언트 코드 생성"을 선택하여 코드를 생성합니다.

4단계: 생성된 Axios 코드를 복사하여 프로젝트에 붙여넣습니다.

HTTP 요청을 보내기 위해 Apidog 사용하기

Apidog는 HTTP 요청을 테스트할 수 있는 기능을 더욱 향상시키는 여러 가지 고급 기능을 제공합니다. 이 기능들은 요청을 사용자 정의하고 보다 복잡한 시나리오를 손쉽게 처리할 수 있게 해줍니다.

button

1단계: Apidog를 열고 새 요청을 생성합니다.

2단계: 생성하려는 POST 요청의 API 세부 정보를 찾거나 수동으로 입력합니다.

3단계: 필수 매개변수와 요청 본문에 포함할 데이터를 입력합니다.

모범 사례

재시도 시도 모니터링

재시도가 안정성을 개선할 수 있지만 서버에 부하를 증가시킬 수도 있습니다. 재시도 시도를 모니터링하고 필요에 따라 재시도 로직을 조정하세요. Apidog와 같은 도구는 API를 효과적으로 모니터링하고 테스트하는 데 도움을 줄 수 있습니다.

다양한 시나리오 처리

애플리케이션의 특정 요구에 따라 재시도 로직을 사용자 정의하세요. 예를 들어, 비율 제한 오류를 다르게 처리하여 더 긴 지연이나 다른 재시도 전략을 구현할 수 있습니다.

사용자에게 정보 제공

재시도가 발생할 때 사용자에게 알리십시오, 특히 이는 눈에 띄는 지연으로 이어지는 경우. 이는 간단히 로딩 스피너를 표시하거나 앱이 재연결을 시도하고 있다는 메시지를 나타내는 것일 수 있습니다.

재시도 시도 제한

합리적인 한계를 설정하여 무한 재시도를 피하세요. 이는 애플리케이션이 실패한 요청의 무한 루프에 갇히는 것을 방지합니다.

결론

Axios 재시도 요청을 마스터하는 것은 웹 애플리케이션의 안정성과 사용자 경험을 크게 향상시킬 수 있습니다. 재시도 로직을 사용자 정의하고 지연을 도입하며 다양한 시나리오를 처리함으로써 네트워크 문제로부터 애플리케이션이 우아하게 회복될 수 있도록 보장할 수 있습니다.

API 개발을 다음 단계로 발전시킬 준비가 되셨나요? API 개발 및 테스트를 단순화하는 포괄적인 도구 세트를 확인하려면 Apidog를 잊지 마세요. Apidog를 통해 귀하의 API 문제를 처리할 장비를 갖추게 될 것입니다.

button