navigator.onLine仅提供粗略的离线/在线状态，不能替代HTTP错误处理；应前置判断+完整兜底，如检查后仍需try/catch，且可监听online/offline事件动态更新UI。
JavaScript 中不能直接在接口请求里“使用 navigator 检查网络状况”，因为 navigator（如 navigator.onLine）只是提供**粗略的离线/在线状态提示**，它不参与请求过程，也不影响 fetch 或 XMLHttpRequest 的行为。但你可以**在发起请求前用它做快速预判**，避免向已知离线的环境发无意义请求。
navigator.onLine 是什么？
navigator.onLine 是一个只读布尔值，反映浏览器是否认为设备处于联网状态：
- 返回 true：浏览器认为有网络连接（但不保证能访问服务器，比如断网但没断开 WiFi、防火墙拦截、DNS 失败等都会导致请求失败）
- 返回 false：浏览器明确检测到离线（如飞行模式、禁用所有网络适配器）
- ⚠️ 注意：它不实时监听网络质量、延迟或服务可达性，也不能替代 HTTP 错误处理
如何结合接口请求合理使用？
推荐做法是：**用 navigator.onLine 做轻量前置判断 + 保留完整的请求错误兜底逻辑**。
- 请求前检查：
if (!navigator.onLine) { console.warn('当前离线，跳过请求'); return; } - 仍需保留
fetch().catch()或try/catch，因为onLine === true时请求仍可能失败 - 可监听网络变化，动态更新 UI 状态：
window.addEventListener('online', handler)和window.addEventListener('offline', handler)
一个实用示例（带防抖和状态反馈）
下面是一个封装过的请求函数，整合了网络状态检查与用户提示：
立即学习“Java免费学习笔记（深入）”；
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));
更可靠的网络探测方式（补充建议）
如果业务对连通性要求高（比如必须确认 API 服务可达），仅靠 navigator.onLine 不够，可配合：
- 发送一个轻量级探测请求（如
HEAD /health或空 GET 到同域某端点） - 设置较短超时（如 3s），失败则视为“当前不可达”
- 注意避免跨域限制，探测接口最好同源
