axios 요청 취소하기

axios는 요청을 취소할 수 있는 CancelToken을 제공한다.

cancelToken = axios.CancelToken.source();
// 토큰을 생성
axios.get(url, { cancelToken: cancelToken.token });
// 요청에 토큰을 넣어서 전송
cancelToken.cancel();
// 토큰의 cancel메서드를 이용하여 취소

토큰을 생성하여 axios의 config에 넣어주면 된다.
그 후 토큰의 cancel()메서드를 호출하면 된다.

아래의 코드는 리액트에서 사용한다고 가정하고 예시로 작성해본 코드이다..!

const Example = () => {
  const ref = useRef();
  const handleRequest = async () => {
    try {
        ref.current = axios.CancelToken.source();
        const data = await axios.get(
          url,
          {
            data:{/.../},
            cancelToken: ref.current.token,
          });
          //...데이터 처리
        }
        catch (e) {
            if (error.response) {
                //서버에서 에러 메시지를 전달해주었을 경우
                console.error(error.response.message);
            }
            else if (error.request) {
                //서버에서 응답하지 않은 경우
                console.error("request is failed!");
            }
            else if (axios.isCancel(error)) {
                //요청을 취소한 경우
                console.log("request is cancled!");
            }
        }
    };
};

const handleRequestCancel=()=>{
    res.current.cancel();
}

return(
    <>
    <button onClick={handleRequest}>요청</button>
    <button onClick={handleRequestCancel}>취소</button>
    </>
)

마지막 요청만 서버로 보내는 디바운싱과 함께 적용하면 요청을 효율적으로 관리할 수 있을 것 같다.

디바운싱을 적용하여 간단하게 작성해보았다.

const Example = () => {
  const ref = useRef();
  const timer=useRef();
  const handleRequest = () => {
      if(timer.current){
          clearTimeout(timer);
      }
      const newTimer=setTimeout(async ()=>{
        try {
        ref.current = axios.CancelToken.source();
        const data = await axios.get(
          url,
          {
            data:{/.../},
            cancelToken: ref.current.token,
          });
          //...데이터 처리
        }
        catch (e) {
            if (error.response) {
                //서버에서 에러 메시지를 전달해주었을 경우
                console.error(error.response.message);
            }
            else if (error.request) {
                //서버에서 응답하지 않은 경우
                console.error("request is failed!");
            }
            else if (axios.isCancel(error)) {
                //요청을 취소한 경우
                console.log("request is cancled!");
            }
        }
        };
    },1300)
    timer.current=(newTimer)
};

const handleRequestCancel=()=>{
    res.current.cancel();
}

return(
    <>
    <button onClick={handleRequest}>요청</button>
    <button onClick={handleRequestCancel}>취소</button>
    </>
)

다음에 진행할 프로젝트에 꼭 한 번 적용해보고 싶다!

ref

axios 러닝 가이드