原生表单提交不触发JS异常，因页面卸载导致执行环境销毁；fetch提交才可捕获网络失败、HTTP状态异常、响应数据异常三类错误，需分层处理并显式判断。
跨表单提交本身不产生 JavaScript 异常，所谓“捕获异常”实际是处理 fetch 或 XMLHttpRequest 失败、网络中断、CORS 拒绝、后端返回非 2xx 状态码等场景。浏览器原生表单提交（无 JS 干预）不会抛出可捕获的 JS 错误，页面直接跳转或刷新，错误只能靠服务端重定向提示或 Network 面板观察。
为什么 window.onerror 和 try-catch 对原生跨表单提交无效
原生 提交时，浏览器会终止当前页面生命周期，发起全新导航请求——JS 执行环境被销毁，window.onerror 不触发，try-catch 也无处包裹。只有你用 fetch 或 axios 手动提交，才进入 JS 异常可捕获范围。
- 表单直接提交 → 页面卸载 → 无 JS 异常，无法用
try-catch捕获 -
fetch提交 → JS 控制流持续 → 网络失败、JSON 解析失败、throw都可被捕获 -
window.onerror只捕获脚本执行错误（如undefined.foo()），不捕获 fetch 网络失败 - 要监听 fetch 类错误，必须显式处理
catch或response.ok判断
用 fetch 跨域提交时必须处理的三类错误分支
真正可控的跨表单提交，一定是用 fetch + FormData 实现的。此时错误分三层，每层都要独立判断：
-
网络层失败：请求根本没发出去（DNS 失败、离线、CORS 预检被拒），
fetch()返回 Promise reject，必须用.catch()捕获 -
HTTP 状态异常：请求发出但响应非成功状态（如 400、401、500），
response.ok === false，需检查response.status和response.headers.get("content-type")再决定如何解析错误体 -
响应数据异常：状态是 200 但返回的是 HTML（如 Nginx 50x 页面）、空响应、或 JSON 格式错误，
await response.json()会 throw，必须包在try/catch里
示例关键逻辑：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
fetch('https://api.example.com/submit', {
method: 'POST',
body: new FormData(form)
})
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(data => {
// 成功
})
.catch(err => {
if (err.name === 'TypeError' && err.message.includes('fetch')) {
// 网络失败：离线、CORS、预检拒绝
} else if (err.message.startsWith('HTTP')) {
// HTTP 状态错误
} else {
// JSON 解析失败等
}
showErrorMessage(err.message);
});
如何让错误提示准确定位到具体字段
后端返回的错误结构（如 { "email": ["格式不合法"], "password": ["至少8位"] }）必须和前端 input[name="email"] 严格对齐，否则提示无法绑定。常见断点：
- 前后端字段名大小写不一致：
emailvsEmail→ 前端查不到 key - 嵌套字段未扁平化：后端返回
{"user": {"email": [...]}}，前端却按顶层 key 查email - 多选框/数组字段命名不规范：
hobby[]或hobby[0]会导致后端解析为数组但 key 名变形 - 错误容器未用
aria-invalid="true"和aria-describedby关联，屏幕阅读器无法读出
绑定提示的最小可行代码：
Object.entries(backendErrors).forEach(([name, messages]) => {
const field = document.querySelector(`[name="${name}"]`);
const msgEl = field?.nextElementSibling;
if (field && msgEl) {
field.setAttribute('aria-invalid', 'true');
field.setAttribute('aria-describedby', msgEl.id);
msgEl.textContent = messages[0];
}
});
最容易被忽略的是：跨域提交时，CORS 配置缺失会导致 fetch 直接 reject，但浏览器控制台只报 “No 'Access-Control-Allow-Origin' header”，不显示后端真实错误；而用户看到的只是“提交失败”，连状态码都拿不到。务必在服务端确保 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 全部正确，且预检请求（OPTIONS）能稳定返回 204。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
