JavaScript 中怎么捕获 Fetch 请求中由于断网导致的网络异常-js教程-PHP中文网

fetch断网时直接reject typeerror而非进入then或返回http错误响应；应通过instanceof typeerror和错误消息关键词捕获，配合abortcontroller可增强超时与中断控制。

javascript 中怎么捕获 fetch 请求中由于断网导致的网络异常

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 后，既能捕获断网，也能处理人为中断或超时：

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;
  }
}