abortcontroller 防止表单重复提交的核心是每次提交前 abort 上一次请求并用 signal 绑定 fetch；需复用 controller 实例、配合按钮禁用、注意 api 兼容性，并在组件卸载时清理以避免内存泄漏。
用 AbortController 防止表单重复提交，核心是：**每次提交前 abort 上一次未完成的请求，并用 signal 绑定到 fetch（或其他支持 signal 的 API）**。它不直接拦截点击，而是让旧请求“静默失败”，避免后端重复处理。
1. 创建并管理 AbortController 实例
不能在表单提交事件里每次都新建 controller —— 那样无法 abort 之前的请求。需把 controller 声明在函数作用域外或作为闭包变量保存：
let currentController = null;
function handleSubmit(event) {
event.preventDefault();
// 取消上一次请求（如果存在）
if (currentController) {
currentController.abort();
}
// 创建新 controller
currentController = new AbortController();
const signal = currentController.signal;
// 发起请求
fetch('/api/submit', {
method: 'POST',
body: new FormData(event.target),
signal // 关键：传入 signal
})
.then(res => res.json())
.then(data => console.log('成功:', data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消（可能是重复提交）');
return;
}
console.error('请求出错:', err);
});
}
2. 表单绑定与防抖/禁用按钮可配合使用
AbortController 解决的是「请求层」的重复，但 UX 层建议同步加防护，避免用户连续点击：
- 提交时禁用按钮：
form.querySelector('button[type="submit"]').disabled = true - 响应完成后恢复按钮：
finally中重置 disabled 和 currentController - 不推荐仅靠防抖（debounce），因为用户可能真想快速提交不同内容；abort 是更准确的语义
3. 注意 signal 不支持所有 API，需确认兼容性
目前原生支持 signal 的有：fetch、setTimeout（需配合 AbortSignal.timeout()）、ReadableStream 等。但 XMLHttpRequest、axios（默认不支持）需额外适配：
- axios v1.5+ 支持
signal选项，可直接传入 - 老版本 axios 或自定义封装可监听
abort事件手动调用cancel - 普通
setTimeout不支持 signal，但可用AbortSignal.timeout(ms)替代
4. 清理逻辑：避免内存泄漏
如果表单可能长期存在（如 SPA 页面未卸载），记得在组件销毁或表单移除时清理：
// 例如在 React useEffect cleanup 或 Vue onUnmounted 中：
return () => {
if (currentController) {
currentController.abort();
currentController = null;
}
};
否则残留的 controller 可能持有对回调或 DOM 的引用，影响垃圾回收。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
