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주소를 넣어서 작동시키면 

실제로 취소가 작동하는 것은 아니며, 그냥 요청 보내놓은 req에 대한 response를 무시한다.

취소를 해도 서버는 연산을 멈추지 않고, 응답을 일단 클라이언트로 보낸다.

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

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

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

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

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

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