Fetch断网时直接reject TypeError而非进入then或返回HTTP错误响应；应通过instanceof TypeError和错误消息关键词捕获，配合AbortController可增强超时与中断控制。
Fetch 请求在断网时不会触发 catch，也不会进入 then 的响应处理，而是直接 reject 一个 TypeError（如 "Failed to fetch" 或 "NetworkError when attempting to fetch resource"），这是捕获断网异常的关键。
断网异常的本质是网络层失败，不是 HTTP 错误
Fetch 只在请求完全发出且收到 HTTP 响应后才返回 Response 对象。断网、DNS 失败、连接被拒绝等属于网络底层问题，fetch 无法得到任何响应，因此会以 Promise reject 方式抛出 TypeError，而不是返回 status ≥ 400 的 Response。
- ✅ 断网、关 WiFi、禁用网卡 → 触发
catch，错误类型为TypeError - ❌ 404、500、超时（未设 signal）→ 仍进入
then，需手动检查response.ok或response.status
用 try/catch + 检查 error 构造函数识别断网
最可靠的方式是判断 reject 的 error 是否为 TypeError，并结合错误消息关键词（不同浏览器略有差异）：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
async function safeFetch(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
if (err instanceof TypeError && /failed|network|fetch/i.test(err.message)) {
console.error('检测到网络异常（可能断网）');
// 此处可提示用户检查网络、显示离线态等
throw new Error('网络不可用，请检查网络连接');
}
throw err; // 其他错误（如 JSON 解析失败、业务错误）继续抛出
}
}
配合 AbortController 增强可控性（可选但推荐）
单纯依赖原生 reject 不够灵活，比如想统一设置超时、或主动中止请求。加入 AbortController 后，既能捕获断网，也能处理人为中断或超时：
立即学习“Java免费学习笔记（深入）”；
async function fetchWithTimeout(url, timeout = 8000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(url, { signal: controller.signal });
clearTimeout(id);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
clearTimeout(id);
if (err.name === 'AbortError') {
throw new Error('请求超时或已取消');
}
if (err instanceof TypeError && /failed|network|fetch/i.test(err.message)) {
throw new Error('网络连接失败，请检查网络');
}
throw err;
}
}
实际项目中建议封装统一的请求函数
把网络异常识别、重试机制、loading 状态、错误上报等逻辑收拢，避免每个地方重复判断：
- 对
TypeError做标准化处理（如标记为isNetworkError: true） - 配合全局事件监听
window.addEventListener('offline', ...)提前感知状态 - 必要时 fallback 到
navigator.onLine做快速粗略判断（注意：它不完全可靠）
