React axios 이전 요청 취소 최신버전!!

더이상 axios v0.22.0부터 CancelToken을 쓰지 않습니다.

참고: https://github.com/axios/axios?tab=readme-ov-file#cancellation

 

반응형

 

이제 CancelToken의 현대판인 AbortController로 이전 요청을 취소하는법을 알려드릴거에요.

코드부터 봅시다.

  const source = useRef<any>(null);
  const controller = new AbortController();
  const handleChange = () => {
    try {
      if (source.current !== null && !source.current.aborted) { // already exists request
        console.log('request canceled');
        source.current.abort();
      }
      source.current = controller;
      if (source.current !== null) {
        axios.get('/api/search', { signal: source.current.signal }).then((res) => {
          setDataState({res})
        }).catch((e) => {
          console.log(e);
        });
      }
    } catch (err) {
      console.error(err);
    }
  };

 

controller는 함수 선언전에 따로 빼주시고 useRef를 함수안에서 전역 변수처럼 사용합니다.

 

handleChange메서드안에  이전 요청이 있다면 취소시키고 다시 source.current에 controller를 넣어준 후 요청하시면 됩니다.

 

위의 코드는 검색창에서 자동완성 기능처럼 타이핑할때마다 요청을 날릴때 참 유용하겠죠?