axios 취소 기능으로 검색 debounce 구현하기

<input type="text" oninput="handleInputChange(event)">

태그는 이거 하나만 들어가있으면 된다.

let cancelToken;

function fetchData(searchText) {
  if (cancelToken) {
    // 이전 요청 취소
    cancelToken.cancel('잠깐만요 취소요청 보낼께요!');
  }

  cancelToken = axios.CancelToken.source();

  axios.get('https://api.example.com/search', {
    params: {
      query: searchText
    },
    cancelToken: cancelToken.token
  })
    .then(response => {
      // 검색 결과 처리
      console.log(response.data);
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        // 이전 요청이 취소된 경우
        console.log('XHR 요청이 취소됨여:', error.message);
      } else {
        // 기타 오류 처리
        console.error(error);
      }
    });
}

function handleInputChange(event) {
  const searchText = event.target.value;

  // 500ms 대기 후 fetchData 호출
  setTimeout(() => {
    fetchData(searchText);
  }, 500);
}

url은 'https://api.example.com/search'라고 표기하긴 했지만,

어쩌피 get요청이므로

백틱 & 템플릿 리터럴 사용해서`https://api.example.com/search?query=${searchText}`

로 바꿔도 된다.

그럼 params를 따로 data에 끼워서 보낼 필요가 없음.

아무튼 실제로 저 코드에 적절한 api주소를 넣어서 작동시키면 

연산이 느린 API의 경우 실제로 취소가 작동한다.

실제로는 그렇게까지 오래 연산이 걸리는 케이스가 별로 없기 때문에,

취소가 되기 전에 이미 클라이언트에 데이터를 보내는 경우가 대다수라

서버에서 연산이 별로 없는 API는 취소가 잘 안먹을 때도 있음.

(아니면 서버에서 고의로 timer를 주고 기다리고 있던지)

예시 코드에서는 500ms를 줬지만,

서버 성능에 따라 1초(1000ms)나 그 이상을 줄 수도 있을 것 같다.

특히 나같은 개인서버를 운영하는 입장에서는 

전기세와 성능/비용 절감을 매우 중요하게 생각하기에...

이거도 lodash의 _.debounce()로 구현이 되는걸로 알고있지만,

역시 코드는 바닐라 스크립트로 직접 구현 해봐야지.