[typescript] 타입스크립트에서 REST API 호출 시 응답 캐싱 방법

12 Dec 2023

typescript

웹 애플리케이션이나 모바일 앱에서 REST API를 호출할 때 사용자 경험을 증진시키기 위해 응답을 캐싱하는 것이 중요합니다. 타입스크립트에서는 Axios나 Fetch API와 같은 라이브러리를 사용하여 REST API를 호출할 수 있습니다. 이번 블로그에서는 타입스크립트에서 Axios를 사용하여 REST API 응답을 캐싱하는 방법에 대해 알아보겠습니다.

Axios 인터셉터를 이용한 응답 캐싱

Axios는 인터셉터(interceptor)를 사용하여 요청과 응답을 중간에 가로채고 처리할 수 있습니다. 이를 통해 Axios를 사용하여 REST API를 호출할 때 응답을 캐싱할 수 있습니다.

아래는 타입스크립트에서 Axios를 사용하여 응답을 캐싱하는 예시입니다.

import Axios, { AxiosInstance } from 'axios';

// Axios 초기화
const axiosInstance: AxiosInstance = Axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 응답 캐시 객체
const responseCache = new Map();

// 응답 캐싱 인터셉터 추가
axiosInstance.interceptors.response.use(
  (response) => {
    // 응답을 캐시에 저장
    responseCache.set(response.config.url, response.data);
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// REST API 호출 시 캐시된 응답 사용
async function getCachedResponse(url: string) {
  if (responseCache.has(url)) {
    return responseCache.get(url);
  } else {
    try {
      const response = await axiosInstance.get(url);
      return response.data;
    } catch (error) {
      return null;
    }
  }
}

이 예시에서는 Axios 인터셉터를 사용하여 REST API 응답을 캐싱하고, getCachedResponse 함수를 통해 캐시된 응답을 사용합니다.

Axios를 사용하여 REST API 응답을 캐싱함으로써 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.

응답 캐싱을 할 때 주의할 점은 캐시의 유효성을 유지하는 것입니다. 응답이 변동 가능한 데이터인 경우 캐시의 유효성을 유지하기 위해 적절한 방법으로 캐시를 갱신해야 합니다.

참고 자료

Axios 문서: https://axios-http.com/docs/intro
MDN web docs - Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API