JavaScript 怎么在接口请求中使用 navigator 检查网络状况-js教程-PHP中文网

navigator.onLine仅提供粗略的离线/在线状态，不能替代HTTP错误处理；应前置判断+完整兜底，如检查后仍需try/catch，且可监听online/offline事件动态更新UI。

javascript 怎么在接口请求中使用 navigator 检查网络状况

JavaScript 中不能直接在接口请求里“使用 navigator 检查网络状况”，因为 navigator（如 navigator.onLine）只是提供**粗略的离线/在线状态提示**，它不参与请求过程，也不影响 fetch 或 XMLHttpRequest 的行为。但你可以**在发起请求前用它做快速预判**，避免向已知离线的环境发无意义请求。

navigator.onLine 是什么？

navigator.onLine 是一个只读布尔值，反映浏览器是否认为设备处于联网状态：

返回 true：浏览器认为有网络连接（但不保证能访问服务器，比如断网但没断开 WiFi、防火墙拦截、DNS 失败等都会导致请求失败）
返回 false：浏览器明确检测到离线（如飞行模式、禁用所有网络适配器）
⚠️ 注意：它不实时监听网络质量、延迟或服务可达性，也不能替代 HTTP 错误处理

如何结合接口请求合理使用？

推荐做法是：**用 navigator.onLine 做轻量前置判断 + 保留完整的请求错误兜底逻辑**。

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

请求前检查：if (!navigator.onLine) { console.warn('当前离线，跳过请求'); return; }
仍需保留 fetch().catch() 或 try/catch，因为 onLine === true 时请求仍可能失败
可监听网络变化，动态更新 UI 状态：window.addEventListener('online', handler) 和 window.addEventListener('offline', handler)

一个实用示例（带防抖和状态反馈）

下面是一个封装过的请求函数，整合了网络状态检查与用户提示：

async function safeFetch(url, options = {}) {
  if (!navigator.onLine) {
    throw new Error('网络不可用，请检查网络连接');
  }
  
  try {
    const res = await fetch(url, options);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    // 这里可统一上报错误，或触发重试逻辑
    console.error('请求失败:', err);
    throw err;
  }
}

// 使用
safeFetch('/api/data')
  .then(data => console.log(data))
  .catch(err => alert(err.message));