React中结合Axios使用AbortController无法终止请求求助

尽管这个问题已经被多次讨论，但在我的场景里还是没解决。我参照Stack Overflow上@Drew Reese的回答操作，可abort()始终无法终止多文件上传。

自定义Axios实例代码 #

const axiosInstance = axios.create({
   baseURL: API,
   headers: {
      Accept: 'application/json',
   },
});

axiosInstance.interceptors.request.use((config) => {
   config.formSerializer = { indexes: null };
   return config;
});

export default axiosInstance;

React组件代码 #

import axios from '../mycomponents';
const abortControllerRef = useRef(new AbortController());

// ... 省略其他业务代码

const onSubmit = handleSubmit(async (mydata) => {
  // ... 省略其他逻辑处理
  try {
     axios.defaults.headers['Content-Type'] = 'multipart/form-data';
     const res = await axios({
        method: 'post',
        url,
        data: mydata,
        onUploadProgress : handleProgress,
        signal: abortControllerRef.current.signal,
     });         
  } catch (err) {
     if (err.name === 'CanceledError') { 
        console.error('操作已取消');
        // 重置控制器
        abortControllerRef.current = new AbortController();
     } else {
        console.error(err);         
     }
  }
});

// ... 省略其他业务代码

const cancelUpload = () => {
      const controller = abortControllerRef.current;
      controller.abort();
};

点击按钮触发cancelUpload函数后，完全无法终止多文件上传（已选择多个文件）。

修改后的情况 #

按照@AkeelAhmedQureshi的建议修正了signal的拼写错误后，现在能捕获到CanceledError并打印“操作已取消”，但Axios还是会继续发送请求，服务器最终会收到大部分请求负载（比如5个文件里的2个加上其他数据），并且完成整个事务。这到底哪里出问题了？

内容的提问来源于stack exchange，提问作者Maverick