如何通过HTML的try catch包裹Fetch调用处理网络错误与解析异常-html教程-PHP中文网

fetch 不抛出 http 错误，仅网络完全失败时 reject；需手动检查 response.ok 或 status 并显式 throw，且 res.json() 必须 await 并在同 try 块中捕获，超时需 abortcontroller，错误应分类处理。

如何通过html的try catch包裹fetch调用处理网络错误与解析异常

Fetch 本身不抛出网络错误，`try...catch` 捕获不到 404、500 或断网

这是最常被误解的一点：fetch() 只有在**网络完全失败**（如 DNS 解析失败、请求被阻止、离线）时才 reject；而 HTTP 状态码如 404、500 仍会 resolve，只是返回一个 Response 对象。所以直接 try...catch 包裹 fetch() 调用，对服务端报错毫无作用。

正确做法是：先 await fetch()，再手动检查 response.ok 或 response.status，显式抛错：

try {
  const res = await fetch('/api/data');
  if (!res.ok) {
    throw new Error(`HTTP error: ${res.status} ${res.statusText}`);
  }
  const data = await res.json();
  console.log(data);
} catch (err) {
  // 这里能捕获：网络中断、跨域拒绝、JSON 解析失败、上面 throw 的错误
  console.error(err.message);
}

`res.json()` 失败会抛 SyntaxError，必须在 `try` 内部 catch

Response.json() 是异步操作，且只要响应体不是合法 JSON 就会 reject —— 比如后端返回了 HTML 错误页、空响应、或字段类型错乱（如字符串当数字解析）。这个 reject 不会被外层 try...catch 自动捕获，除非你把它也 await 并放在同一 try 块里。

常见错误写法（res.json() 错误逃逸）：

try {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error(...);
  res.json().then(data => ...); // ❌ 异步链脱离 try 范围
} catch (err) { ... }

正确写法（全部 await + 同一 try）：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

始终 await res.json()，不要用 .then()
如果后端可能返回非 JSON（如 text/plain），改用 res.text() 再手动解析
必要时加 try...catch 嵌套，只包 JSON.parse()（当你用 res.text() 后手动 parse）

超时控制不能靠 `try...catch`，得用 `AbortController`

原生 fetch() 没有 timeout 参数，网络卡住时既不 reject 也不 resolve，try...catch 完全无效。必须配合 AbortController 主动中断：

const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);

try {
  const res = await fetch('/api/data', {
    signal: controller.signal
  });
  if (!res.ok) throw new Error(...);
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') {
    console.error('Request timed out');
  } else if (err.name === 'TypeError' && err.message.includes('fetch')) {
    console.error('Network failed');
  } else {
    console.error('Other error:', err.message);
  }
}

注意：AbortError 是标准名称，但某些环境（如旧版 Safari）可能抛 DOMException，需兼容判断 err.name === 'AbortError' || err.code === 20。