应禁用按钮并绑定请求生命周期，在catch/finally中恢复状态，配合前端校验、幂等设计及框架安全写法；先checkvalidity校验，再生成幂等key，fetch中用formdata（含文件时不设content-type），finally恢复按钮，requestsubmit需配preventdefault。
如何用 fetch 正确提交表单并保持按钮状态
直接禁用按钮再发请求是常见但危险的做法：网络失败后按钮永远灰掉，用户无法重试。真正要锁住的是“提交动作”，不是 UI 元素本身。
- 先调用
form.checkValidity()，校验不通过就别禁用按钮——否则用户卡在 disabled 状态却看不到错误提示 - 禁用按钮前，记录当前表单数据的指纹（比如
JSON.stringify(Object.fromEntries(new FormData(form)))），用于后续防重复比对 - 在
fetch().then().catch().finally()的finally块里恢复按钮状态，不能只写在then里 - 若使用
FormData且含文件，**不要手动设置Content-Type**，浏览器会自动注入正确的multipart/form-data; boundary=...
requestSubmit() 触发验证后再异步提交的坑
requestSubmit() 不是提交命令，而是“触发原生校验 + 只有校验通过才派发 submit 事件”的模拟点击行为。很多人误以为它能绕过 submit 监听器直接发请求。
- 必须配合
event.preventDefault()使用，否则校验通过后仍会跳转到action地址 - 不能在非
<form></form>元素上调用，button.requestSubmit()会报TypeError - 旧版 Android WebView 不支持该方法，降级方案是手动调
form.reportValidity()，再判断form.checkValidity()返回值决定是否继续 fetch - 移动端 Safari 支持良好，但要注意：校验失败时它会自动聚焦第一个无效字段，此时按钮可能还没禁用，需在
submit监听器外加一层防抖或状态标记
前端幂等性靠什么？不只是按钮 disabled
按钮禁用只能防手抖，拦不住刷新、后退、F5、代理重发。前端真正的幂等结构必须绑定请求生命周期和唯一标识。
- 每次提交生成一个临时 ID（如
crypto.randomUUID()），作为请求头X-Idempotency-Key发送给后端 - 前端维护一个 Map：
pendingSubmits.has(id)，只要该 ID 对应的请求未 resolve/reject，就拒绝新提交 - 不要依赖时间戳或简单计数器做去重，网络延迟下多个请求可能携带相同时间戳
- 如果表单字段极少变动（如登录页），可将关键字段哈希（如
sha256(email + password)）作为幂等 key，但注意避免暴露敏感信息到前端计算逻辑中
含文件上传时的 FormData 处理陷阱
FormData 看似简单，但在跨浏览器和含空值场景下容易漏掉字段或触发异常。
-
new FormData(form)会自动忽略disabled字段和空的type="file"输入框，但不会跳过display: none的可见字段——这点常被误认为“隐藏字段不提交” - 若后端要求 JSON 格式，必须先用
Object.fromEntries(formData)转对象，再JSON.stringify()，不能直接把FormData当字符串发 - IE11 不支持
new FormData(form)构造函数，需降级为遍历form.elements并手动append() - 当表单含多个同名
file输入（如多图上传），FormData会按顺序 append 所有文件，但后端接收逻辑必须支持同名多值，否则只拿到最后一个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
