[typescript] Axios를 사용하여 요청에 대한 캐싱된 응답 사용하기

22 Dec 2023

typescript

Axios는 인기 있는 HTTP 클라이언트 라이브러리 중 하나이며, 캐시 기능을 통해 이전에 수행한 요청의 응답을 저장하고 재사용할 수 있습니다. 이는 네트워크 요청을 줄이고 응답 시간을 단축하여 성능을 향상시킬 수 있습니다.

Axios 인터셉터를 사용하여 캐시된 응답 처리하기

Axios에서는 인터셉터(Interceptor)를 사용하여 요청과 응답을 가로챌 수 있습니다. 이를 활용하여 캐시된 응답을 처리할 수 있습니다. 아래는 Axios를 사용하여 요청에 대한 캐시된 응답을 처리하는 방법을 보여줍니다.

import axios from 'axios';
import * as LRUCache from 'lru-cache';

// 캐시 객체 생성
const cache = new LRUCache({
  max: 100,  // 최대 항목 수
  maxAge: 1000 * 60 * 5  // 캐시 유효 시간 (5분)
});

// Axios 인스턴스 생성
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

// 요청 전에 인터셉터로 캐시된 응답 검사
axiosInstance.interceptors.request.use((request) => {
  const response = cache.get(request.url);
  if (response) {
    return Promise.resolve(response);
  }
  return request;
});

// 응답 후에 인터셉터로 캐시된 응답 저장
axiosInstance.interceptors.response.use((response) => {
  cache.set(response.config.url, response);
  return response;
}, (error) => {
  return Promise.reject(error);
});

// REST API 요청
axiosInstance.get('/data')
  .then((response) => {
    console.log('응답 데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

위 코드에서는 LRU-Cache 패키지를 사용하여 LRU(Least Recently Used) 알고리즘을 기반으로 한 캐시 객체를 생성하고, Axios의 인터셉터를 활용하여 요청과 응답을 처리합니다. 이를 통해 간단한 캐싱 기능을 구현할 수 있습니다.

Axios를 이용하여 캐시된 응답을 사용함으로써, 네트워크 요청을 최소화하고 응답 시간을 개선할 수 있습니다.

Axios 인터셉터를 사용하여 캐시된 응답 처리하기

참고 자료