Axios는 자바스크립트 및 TypeScript 환경에서 널리 사용되는 HTTP 클라이언트 라이브러리이며, 요청을 캐시하고 캐싱된 응답을 사용할 수 있는 기능을 제공합니다. 이 기능을 사용하면 네트워크 요청을 최소화하여 애플리케이션의 성능을 향상시킬 수 있습니다.

Axios 요청 캐시하기

Axios를 사용하여 요청을 캐시하려면 axios-extensions 패키지를 설치해야 합니다. 다음 명령을 사용하여 패키지를 설치하세요.

npm install axios-extensions

이제, Axios 인스턴스를 생성하고 캐싱 옵션을 구성해야 합니다. 예를 들어, 5분 동안 응답을 캐시해야 한다면 다음과 같이 설정할 수 있습니다.

import axios from 'axios';
import axiosExtensions from 'axios-extensions';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

axiosExtensions.init(axiosInstance, {
  cache: {
    maxAge: 5 * 60 * 1000, // 5분
  },
});

export default axiosInstance;

위의 예제에서 axiosExtensions.init() 메서드를 사용하여 캐싱을 구성하고 있습니다. maxAge 옵션을 사용하여 캐시되는 시간을 설정할 수 있습니다.

캐싱된 응답 사용하기

이제 Axios를 사용하여 캐싱된 응답을 사용할 수 있습니다. 예를 들어, 다음과 같이 요청을 보내고 캐싱된 응답을 사용할 수 있습니다.

import axiosInstance from './axios-instance';

axiosInstance.get('/data', { cache: { maxAge: 5 * 60 * 1000 } })
  .then((response) => {
    // 캐싱된 응답을 사용하여 로직을 처리합니다.
  })
  .catch((error) => {
    console.error(error);
  });

위의 예제에서는 axiosInstance.get() 메서드의 두 번째 인수로 cache 옵션을 전달하여 캐싱된 응답을 사용하고 있습니다. 이렇게 함으로써 네트워크 요청을 최소화하고 캐싱된 데이터를 활용할 수 있습니다.

Axios를 사용하여 요청을 캐시하고 캐싱된 응답을 사용하여 애플리케이션의 성능을 향상시켜보세요.

더 자세한 내용은 axios-extensions 공식 문서를 참고하세요.