按钮点击后须立即禁用并切换文字，正确做法是在事件回调首行设置 loading 状态，finally 中恢复；禁用 disabled 会破坏动画和可访问性，应改用 loading 类配合 aria-busy；表单需监听 onsubmit 并 preventdefault 防回车重复提交。
按钮点击后立即禁用并切换文字，不是等请求返回才动
用户点下去那一帧，按钮就必须变状态——否则网络稍慢，就会连点好几次，后端收到重复请求。很多人把 button.disabled = true 和文字修改塞在 fetch().then() 里，结果请求已发、UI 才更新，完全失去防护意义。
正确做法是：事件回调第一行就处理 UI 状态。不管请求是否成功，都要走完整生命周期。
- 提交前立刻执行：
button.disabled = true+button.textContent = '提交中…' - 必须在
finally块里恢复：button.disabled = false和原始文字 - 别用
type="submit"按钮的onclick直接触发form.submit()，它会绕过 HTML5required验证 - 应监听
form.onsubmit或给表单加event.preventDefault()后手动控制
用 loading 类替代 disabled 属性来保动画和可访问性
直接设 disabled 会导致 CSS 动画失效、屏幕阅读器跳过、:hover 不触发——这是最常踩的坑。浏览器对 disabled 元素有强干预，没法单独控制旋转图标或文字切换。
推荐用 class 控制视觉状态，同时保留原生表单防护逻辑：
- CSS 中定义：
.btn.loading { pointer-events: none; opacity: 0.7; filter: grayscale(20%); } - 配合
aria-busy="true"和aria-disabled="true"，兼顾读屏器 - 旋转图标用
::after或内联<svg></svg>，只对.btn.loading生效 - 动画只用
transform: rotate()+opacity，加will-change: transform防卡顿
fetch 成功失败都要进 finally，否则 loading 状态永远卡住
fetch 的 catch 不捕获 HTTP 错误（如 400、500），只捕获网络异常。这意味着你可能显示“提交成功”，实际后端返回了错误 JSON，而按钮还卡在 loading 状态。
必须检查 response.ok 或 response.status，且无论成功失败，都要清理状态：
- 发起请求前：加
loading类、设aria-busy="true" fetch().then(response => { if (!response.ok) throw new Error() }).catch(() => { /* 显示错误提示 */ }).finally(() => { button.classList.remove('loading'); button.setAttribute('aria-busy', 'false'); })
表单内按钮要防回车重复提交，不能只靠禁用按钮
如果是 <form></form> 内的 type="submit" 按钮，光禁用按钮不够——用户仍可按回车触发二次提交。
必须统一在表单层面拦截默认行为：
- 监听
form.onsubmit，第一行调event.preventDefault() - 在 handler 里统一控制 loading 状态和请求逻辑
- 提交成功后如需清空表单，用
form.reset()，别只操作按钮 DOM - 服务端也得做幂等校验（比如用
Idempotency-Key），前端防不住所有绕过
真实场景里，loading 不是“让图标转起来”，而是防止重复提交 + 保持视觉反馈 + 不破坏可访问性。最容易被忽略的是：没在 finally 清理状态、用 disabled 断掉动画、以及回车绕过表单验证。这些点一漏，整个 loading 机制就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
