[javascript] Axios에서의 HTTP 요청 중복 처리 방법

21 Nov 2023

javascript

Axios는 자바스크립트에서 HTTP 요청을 보낼 때 자주 사용되는 라이브러리입니다. 하지만 때로는 여러 번의 요청 중복이 발생할 수 있습니다. 이러한 중복 요청을 처리하는 방법에 대해 알아보겠습니다.

1. 요청 캐싱

한 번의 요청이 완료된 후에는 해당 요청의 결과를 캐싱하는 방법으로 중복 요청을 처리할 수 있습니다. 이렇게 하면 동일한 요청이 다시 발생할 때 서버로의 요청을 보내지 않고 캐시된 결과를 사용할 수 있습니다.

const cache = {};

function getCachedData(url) {
  if (cache[url]) {
    return Promise.resolve(cache[url]);
  }

  return axios.get(url)
    .then(response => {
      cache[url] = response.data;
      return response.data;
    });
}

getCachedData('https://api.example.com/data')
  .then(data => {
    console.log(data);
  });

위 예제에서는 getCachedData 함수를 정의하여 요청된 URL의 캐시된 데이터를 반환합니다. 이 때, 요청한 URL이 이미 캐싱되어 있는 경우에는 캐시된 데이터를 반환하고, 캐싱되어 있지 않은 경우에는 실제 요청을 보내고 데이터를 캐시합니다.

2. 요청 취소

캐싱된 데이터를 사용하는 것 외에도, 중복된 요청을 차단하여 서버에 불필요한 부하를 줄일 수 있습니다. Axios는 CancelToken 기능을 제공하여 요청을 취소할 수 있는 기능을 제공합니다.

let cancelToken = axios.CancelToken.source();

function fetchData(url) {
  cancelToken.cancel(); // 이전 요청 취소

  cancelToken = axios.CancelToken.source(); // 새로운 cancel token 생성

  return axios.get(url, { cancelToken: cancelToken.token })
    .then(response => {
      return response.data;
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log(data);
  });

위 예제에서는 fetchData 함수를 정의하여 이전 요청을 취소하고 새로운 요청을 보내는 방식으로 중복 요청을 처리합니다. 이전 요청을 취소하기 위해 cancelToken.cancel()을 호출하고, 새로운 요청을 보내기 위해 새로운 cancel token을 생성합니다.

3. 요청 인터셉터

요청 인터셉터는 Axios의 기능 중 하나로, 모든 요청 전에 실행되는 함수입니다. 중복 요청을 처리하기 위해 요청 인터셉터를 활용할 수 있습니다.

let pendingRequests = [];

axios.interceptors.request.use(config => {
  config.cancelToken = new axios.CancelToken(cancel => {
    pendingRequests.push(cancel);
  });

  return config;
});

function cancelPendingRequests() {
  pendingRequests.forEach(cancel => {
    cancel();
  });

  pendingRequests = [];
}

function fetchData(url) {
  cancelPendingRequests();

  return axios.get(url)
    .then(response => {
      return response.data;
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log(data);
  });

위 예제에서는 이전 요청을 취소하기 위해 pendingRequests라는 배열에 cancel 함수를 추가하고, 새로운 요청이 들어올 때마다 배열을 초기화하여 이전 요청을 모두 취소합니다.

Axios에서의 HTTP 요청 중복 처리 방법에 대해 알아보았습니다. 요청 캐싱, 요청 취소, 요청 인터셉터를 활용하여 중복된 요청을 효과적으로 처리할 수 있습니다.

참고 자료

Axios 공식 문서