发布方法的Axios取消问题

Question

我正在使用Axios构建Reactjs应用程序来处理数据请求，情况如下：

用户将填写一个表单，当用户单击“提交”按钮提交表单时，将向API端点提交Axios请求以提交数据，但是在此请求期间，如果用户尝试离开页面（单击“后退”按钮，重定向或刷新页面），如果表单数据正在提交，将会有一个警告警告用户，但是如果用户仍然想离开页面，则Axios请求将被终止（取消）。

这是我的代码的概要：

    const source = axios.CancelToken.source();
    axios.post(URL, data, {
        headers: {...},
        onUploadProgress: (progress) => {....},
        cancelToken: source.token,
    })
    .then((res) => {
        console.log('form submitted')
    })
    .catch((thrown) => {
        if(axios.isCancel(thrown)){
            console.log('cancelled')
        } else {
            // error handling
        }
    })

    window.onpopstate = () => {
        if(window.confirm('Are You Sure to.....') {
            source.cancel();
        }
    }

问题是当window.confirm返回true并且运行cancel方法时，在控制台中打印了cancelled消息，我认为这是成功的取消，但是当我打开数据库时，我发现刚刚被取消的数据已经在其中，我想要的是不存储数据，因为请求已被取消。请注意，从未显示form submitted消息。我知道Axios是异步的，但我可以肯定取消操作确实像我之前说的那样成功。