navigator.onLine 不可靠仅反映网络栈状态而非真实连接应结合 AbortController 控制的 fetch 心跳检测如 /api/ping判断服务可达性并加防抖和 CSS 过渡优化提示体验。监听 navigator.onLine 不能直接信浏览器的 navigator.onLine 只反映当前网络栈是否“认为”连上了不是真实连接状态。比如 WiFi 已连但路由器断网、代理失效、DNS 拒绝响应navigator.onLine 仍可能返回 true。它只在用户手动禁用网络如关 WiFi、开飞行模式时才可靠触发 false。实操建议立即学习“前端免费学习笔记深入”不要单独依赖 navigator.onLine 显示“重新连接中…”——它会漏掉大量真实中断场景把它当作快速前置判断若为 false立刻显示提示若为 true仍需发起心跳检测确认服务可达监听 online 和 offline 事件时注意事件可能延迟几百毫秒甚至更久别指望它实时用 fetch() 心跳检测判断后端是否真通前端真正需要知道的是“能否访问我们的 API”而不是“有没有 IP 连接”。最稳的方式是定期发一个轻量 fetch() 到一个稳定 endpoint比如 /health 或 /api/ping根据响应状态和超时决定 UI 状态。实操建议立即学习“前端免费学习笔记深入”心跳请求必须设 timeout用 AbortController默认 fetch 没超时机制卡住会阻塞后续判断避免用 GET / 或静态资源路径如 /favicon.ico它们可能被 CDN 缓存或绕过后端无法反映真实服务状态后端 /health 应检查数据库连接、核心依赖等不能只是返回 200 OK示例关键逻辑const controller new AbortController(); setTimeout(() controller.abort(), 5000); fetch(/api/ping, { signal: controller }) .then(r r.ok ? setOnline() : setOffline()) .catch(() setOffline());“重新连接中…” 文本要防重复渲染和闪动网络抖动时online/offline 事件和心跳失败可能高频触发导致提示反复出现/消失用户体验极差。 JoinMC智能客服 JoinMC智能客服帮您熬夜加班7X24小时全天候智能回复用户消息自动维护媒体主页全平台渠道集成管理电商物流平台一键绑定让您出海轻松无忧