如何在react中取消新的抓取请求中的先前的抓取请求？

axios.get('/api/data', {
  cancelToken: cancelTokenSource.token
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      // 请求被取消
      console.log('请求被取消', error.message);
    } else {
      // 处理其他错误
      console.log('请求发生错误', error.message);
    }
  });

cancelTokenSource.cancel('取消请求的原因');

useEffect(() => {
  const cancelTokenSource = axios.CancelToken.source();

  axios.get('/api/data', {
    cancelToken: cancelTokenSource.token
  })
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        // 请求被取消
        console.log('请求被取消', error.message);
      } else {
        // 处理其他错误
        console.log('请求发生错误', error.message);
      }
    });

  return () => {
    cancelTokenSource.cancel('组件卸载，取消请求');
  };
}, []);