Axios 요청 취소하기 (cancel token)

Axios 요청 취소하기 (cancel token)

상황

• http 요청을 보냈을 때, 혹여나 취소할 수 있는 방법이 없을까? 하다가 axios 공식문서에 cancel token이 있어서 사용해보기로 했습니다.
• "react": "18.2.0", "next": "13.3.4"
• https://axios-http.com/kr/docs/cancellation

사용법

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 에러 핸들링
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 요청 취소하기 (메시지 파라미터는 옵션입니다)
source.cancel('Operation canceled by the user.');

 

예제코드

import React, { useCallback, useState } from 'react';
import axios, { CancelTokenSource } from 'axios';

const CancelTokenComponent = () => {
  const [source, setSource] = useState<CancelTokenSource>(axios.CancelToken.source());
  const [loading, setLoading] = useState<boolean>(false);

  const handleRequest = useCallback(() => {
    setLoading(true);
    setTimeout(() => {
      axios.get('https://jsonplaceholder.typicode.com/todos/1', {
        cancelToken: source.token,
      })
        .then((res) => {
          console.log("res: ", res);
        })
        .catch((thrown) => {
          if (axios.isCancel(thrown)) {
            console.log(thrown.message);
          } else {
            // 혹여나 취소되지 않았을 때
            console.log("Error:", thrown);
          }
        })
        .finally(() => {
          setLoading(false)
        })
    }, 2000);
  }, [source]);

  const handleCancel = useCallback(() => {
    source.cancel('Request canceled');
    setSource(axios.CancelToken.source());
    setLoading(false)
  }, [source]);

  return (
    <div>
      <h1>Cancel Token</h1>
      <div style={{ display: 'flex', gap: '1rem' }}>
        <button type='button' onClick={handleRequest}>{loading ? 'loading...' : 'Request'}</button>
        <button type='button' onClick={handleCancel}>Cancel</button>
      </div>
    </div>
  );
};

export default CancelTokenComponent;

• request button click시 딜레이를 주기위해 setTimeout을 통해 2초 딜레이를 줬습니다.
• request button click시 요청이 보내지게되고, 만약 calncel button click 하면 요청이 취소됩니다.
• source를 state로 만든 이유는, 한번 취소가되면 동일한 cancel token 을 이용해서 요청을 보내게 되기 때문에 계속 요청이 취소되는 결과가 나옵니다.
• 따라서 한번 취소할 때, source를 재생성해서 취소해도 다시 요청을 날릴 수 있도록 했습니다.