必须手动设 disabled="true" 才能彻底禁用按钮，点击瞬间执行 disabled + 文案替换；用 ::after 伪元素实现旋转图标防布局跳动；状态恢复必须在 finally 块中统一处理所有分支。
必须手动设 disabled="true"，否则按钮永远拦不住重复点击——这是唯一能同时禁用鼠标、键盘（空格/回车）、触屏和表单序列化的原生机制。
点击瞬间就要执行 disabled + 文案替换
别等 AJAX 请求发出去再操作，网络延迟下用户早点了第二下。关键动作必须在事件回调第一行完成：
-
button.disabled = true是唯一可靠方式；btn.classList.add('disabled')只改样式，Enter 键照样触发 - 如果按钮含图标（如
<i class="bi bi-check"></i>），不能只改textContent，得用innerHTML或提前缓存原始 HTML 字符串 - 移动端 WebView 对
disabled样式支持不一，建议额外加style="pointer-events: none;"防穿透
用 ::after 伪元素插旋转图标，避免布局跳动
直接给按钮加 animation: spin 1s infinite 会触发重排，文字偏移、宽度抖动。稳妥做法是：
- 按钮设
position: relative - 用
::after伪元素绘制固定尺寸旋转体：content: ""、position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 显式声明
transform-origin: center，否则旧版 Safari 可能绕左上角转
状态恢复必须放在 finally 块里
无论请求成功、失败还是超时，都要还原按钮。漏掉任何一种情况，按钮就永久卡死：
- 恢复
button.disabled = false和aria-disabled="false" - 同步清除
tabIndex="-1"（如果之前加过） - 还原原始文案或移除
spinner-border元素——若用 DOM 插入方式，记得removeChild()，别只隐藏 - 别用
display: none隐藏 spinner，优先用visibility: hidden避免布局跳动
表单内按钮要防 submit 默认行为
如果按钮在 <form> 里且没设 type，默认是 type="submit"，会导致 JS 事件执行完又触发表单提交，逻辑跑两次：
- 要么显式写
<button type="button">提交</button> - 要么在事件处理函数开头加
event.preventDefault() - 别忘了同步设置
aria-busy="true"和role="button"，读屏器才不会误读
最难的不是让图标转起来，而是确保所有路径（包括异常、超时、取消）都走到 finally 里的还原逻辑——少一个分支，按钮就废一个。
