JavaScript Fetch API 中怎么处理无网络连接时的离线异常-js教程-PHP中文网

应主动检测网络状态并合理兜底：先用 navigator.online 快速拦截，再捕获 fetch 的 typeerror 并识别“failed to fetch”等关键词，结合 abortcontroller 设置超时，离线时提供缓存、待同步队列及友好的用户提示。

javascript fetch api 中怎么处理无网络连接时的离线异常

当网络完全断开时，fetch 不会立即抛出“离线”错误，而是触发底层网络超时或拒绝 Promise（通常表现为 TypeError: Failed to fetch），且无法直接区分是离线、服务不可达，还是请求被阻止。关键在于主动检测 + 合理兜底。

主动检查 navigator.onLine 状态

这是最轻量的前置判断，但要注意它仅反映浏览器是否认为自己在线（例如 Windows 切换飞行模式后会立刻更新，但某些 Wi-Fi 连通但无外网的情况仍返回 true）：

// 可作为快速拦截，不替代真实请求校验

Gradle 9.8.0

下载

if (!navigator.onLine) {
  console.warn('当前疑似离线，跳过请求');
  throw new Error('No network connection');
}

捕获 fetch 拒绝并识别典型离线错误

fetch 在 DNS 失败、连接被拒、网络中断等场景下会以 TypeError 拒绝 Promise，消息内容因浏览器而异，但常见关键词包括 "failed to fetch"、"network error"、"TypeError"。建议统一捕获并做基础归类：

用 try/catch 包裹 await fetch(...)，捕获异常
检查 error.name === 'TypeError' 且 error.message.includes('fetch') 或 'network'
避免依赖精确字符串匹配（如 Chrome 和 Firefox 错误信息略有不同）

设置超时并结合 AbortController 主动终止

真实离线时，fetch 可能长时间挂起（尤其在移动端）。应手动加超时控制：

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

try {
  const res = await fetch('/api/data', {
    signal: controller.signal
  });
  clearTimeout(timeoutId);
  return res;
} catch (err) {
  clearTimeout(timeoutId);
  if (err.name === 'AbortError') {
    throw new Error('Request timed out — likely offline or unreachable');
  }
  throw err;
}