문제인식

axios로 요청중에 요청을 취소하는 기능이 필요했는데, react에서는 hooks를 사용하다보니 axios로 취소하는 방법이 인터넷에 있는 방법들과는 조금 차이가 있었다.

해결방법

useRef를 사용하여 글로벌로 조작할 수 있는 변수를 만들고,
request를 보낼때 useRef에 취소 토큰을 등록해두고,
필요할때 취소 토큰이 작동하도록 하면 된다.

const ExampleComponent = () => {
  const request = useRef(); // 토큰을 들고 있을 변수
  const handleClickRequest = async() => {
    try{
      const data = {}
      request.current = axios.CancelToken.source(); // 이렇게 요청때마다 만들어줘야 새로운 토큰을 등록해주게 된다.
      const config = {
        method: "POST",
        url: "https://~~",
        data: data,
        cancelToken: request.current.token, // config에 연재 등록된 토큰을 넣는다.
      }
      const response = await axios(config);
    } catch(error) {
      if(error.response){
        // 응답이 오류로 나온 경우 처리
      }else if(error.request){
        // 응답이 오지 않은 경우 처리
      }else if(axios.isCancel(error)){ // 취소되면 이곳이 발동된다.
        // axios 요청이 취소되어버린경우 처리
        alert("request is canceled");
      }
    }
  }
  const handleClickCancel = () => {
    request.current.cancel();
  }
  return (
    <>
      <button onClick={handleClickRequest}>request</button>
      <button onClick={handleClickCancel}>cancel</button>
    </>
  )
}