form.submit()不支持超时，必须用fetch（配合AbortController）或XMLHttpRequest替代原生提交，并在submit事件中首行调用e.preventDefault()阻止跳转。
form.submit() 没有内置 timeout 参数，必须绕开原生提交
HTML 原生 的 submit() 方法本身不支持超时控制——它一触发就走浏览器默认跳转或刷新流程，根本没机会插手网络层。想加超时，就得放弃「表单自动提交」这条路，改用 JavaScript 手动构造请求。
常见错误是试图给 form.submit() 加 setTimeout 后强行 location.reload() 或清空页面，这不仅无法中断正在发出的请求，还会造成状态混乱、重复提交或白屏。
- 真正可控的方式是：用
fetch或XMLHttpRequest替代表单提交 - 禁用原生提交行为：
e.preventDefault()必须在submit事件中第一时间调用 - 如果后端接口返回的是 HTML（比如 Django/Thymeleaf 渲染页），需额外处理重定向逻辑，不能依赖浏览器自动跳转
fetch 提交表单数据并设置超时的最小可行写法
fetch 本身也不直接支持 timeout，但可以用 AbortController 实现等效效果。这是目前最轻量、兼容性足够（Chrome 66+/Firefox 57+/Edge 16+）的方案。
关键点不是“怎么发”，而是“怎么让发出去的请求可取消”：
- 创建
const controller = new AbortController() - 在
fetch选项中传入{ signal: controller.signal } - 用
setTimeout(() => controller.abort(), 8000)设定 8 秒超时 - 捕获
AbortError：当超时触发abort()，fetch会拒绝 Promise 并抛出该错误
示例片段：
HTTP ${res.status}
处理 multipart/form-data 文件上传时的超时与异常差异
文件上传场景下，超时判断逻辑和普通表单不同：大文件上传过程中，fetch + AbortController 能中断请求，但部分旧版 Safari 对 FormData 中的 Blob 支持不稳定，可能触发 TypeError: Failed to fetch 而非预期的 AbortError。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更隐蔽的问题是服务端中间件（如 Nginx）自带读取超时（client_header_timeout / client_body_timeout），即使前端设了 30 秒，Nginx 可能在 60 秒就主动断连，此时前端收到的错误可能是 TypeError，而非 AbortError。
- 务必在服务端同步配置超时值，避免前后端预期不一致
- 上传前建议先校验文件大小：
if (file.size > 20 * 1024 * 1024)提前提示用户 - 不要依赖
fetch().then().catch()捕获所有错误——AbortController抛出的AbortError在某些环境下不会进入catch，需显式检查err.name
为什么 XMLHttpRequest 比 fetch 更适合老项目兜底？
如果你的项目还需兼容 IE11 或某些定制内核浏览器，XMLHttpRequest 是唯一选择。它的 timeout 属性是原生支持的，且错误类型更明确。
注意两个易错点：
-
xhr.timeout = 8000必须在xhr.open()之后、xhr.send()之前设置，否则无效 - 超时触发的是
xhr.ontimeout回调，不是xhr.onerror；未设置ontimeout时，超时会进onerror，但无法区分是网络断开还是真超时 - IE11 下
FormData不支持直接 appendFile对象，需用new Blob([file], {type: file.type})包一层
真正的复杂点不在代码长度，而在于：超时不是独立模块，它必须和重试策略、loading 状态、错误文案、用户中断操作（比如关闭弹窗）联动。漏掉任意一环，都会让用户觉得“点了没反应”或“重复提交了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
