[javascript] Axios를 사용하여 요청 중복 방지하기

21 Nov 2023

javascript

개발을 하다 보면 서버에 요청을 보내는 경우가 많습니다. 이때 중복 요청을 방지하려면 어떻게 해야 할까요?

Axios는 HTTP 클라이언트 라이브러리로서, 요청을 보내고 응답을 받는 데 사용됩니다. Axios를 사용하여 요청 중복을 방지하기 위해서는 몇 가지 방법이 있습니다.

1. 요청 취소 처리

Axios의 CancelToken 기능을 사용하면 중복 요청을 방지할 수 있습니다. 요청을 보내기 전에 CancelToken을 생성하고 해당 요청에 대한 취소 토큰을 설정합니다. 이후 새로운 요청을 보내기 전에 이전 요청을 취소하면 중복 요청을 방지할 수 있습니다.

아래는 Axios를 사용하여 요청 중복을 방지하는 예제입니다.

import axios from 'axios';

// 요청 취소를 위한 CancelToken 생성
const cancelTokenSource = axios.CancelToken.source();

// 기존 요청 취소
cancelTokenSource.cancel();

// 새로운 요청 보내기
axios.get('https://api.example.com/data', {
  cancelToken: cancelTokenSource.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다.');
    } else {
      console.log('에러 발생:', error);
    }
  });

위 예제에서는 기존 요청을 취소하기 위해 cancelTokenSource.cancel() 메서드를 호출하고, 새로운 요청을 보낼 때 cancelToken: cancelTokenSource.token 옵션을 설정합니다. 요청 취소 시 axios.isCancel() 메서드를 사용하여 취소 여부를 확인할 수 있습니다.

2. 요청 디바운스 처리

Axios를 사용하여 요청 중복을 방지하는 또 다른 방법은 디바운스(debounce)를 사용하는 것입니다. 디바운스는 연이어 호출되는 함수 중 마지막 호출만 실행되도록 제어하는 기능입니다.

아래는 Axios와 Lodash의 debounce 함수를 함께 사용하여 요청 디바운스를 처리하는 예제입니다.

import axios from 'axios';
import debounce from 'lodash/debounce';

// 요청 디바운스 함수 생성
const debounceRequest = debounce(() => {
  axios.get('https://api.example.com/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log('에러 발생:', error);
    });
}, 300); // 300ms 딜레이

// 요청 보내기
debounceRequest();

위 예제에서는 debounce 함수를 사용하여 debounceRequest 함수를 생성합니다. 이 함수는 300ms 딜레이 이후에 실행되며, 중복 요청을 방지하기 위해 가장 마지막 호출만 실행됩니다. 따라서 axios.get() 메서드는 연속적으로 호출되더라도 실제 요청은 딜레이 이후에 한 번만 보내집니다.

1. 요청 취소 처리

2. 요청 디바운스 처리

참고자료