js检测网络状态需结合navigator.online事件监听、服务端心跳验证、失败请求离线暂存与自动重试，以及ui层友好反馈，形成完整闭环。

JS 中检测客户端网络状态主要靠 navigator.onLine 和 online/offline 事件，但要注意它只反映设备是否接入了某个网络（如 Wi-Fi、蜂窝），不等于能访问你的服务器。要真正保障业务可用，得把状态监听和请求重试结合起来用。

基础状态监听：捕获变化比轮询更可靠

直接读 navigator.onLine 只能拿到当前快照，无法感知后续变化。推荐监听事件：

• 用 window.addEventListener('online', handler) 捕获恢复联网的瞬间
• 用 window.addEventListener('offline', handler) 捕获断连时刻
• 首次加载时也应主动检查一次：if (!navigator.onLine) { /* 进入离线态 */ }

状态不准怎么办？加一层服务端心跳验证

navigator.onLine 在以下情况会“误报”为 true：

• 连上了无外网的局域网（如酒店/机场需认证的 Wi-Fi）
• 路由器通电但未拨号
• 某些安卓 WebView 或旧版 iOS 的实现偏差

解决办法：定期发一个轻量请求（比如 GET /health 或 /ping），设置短超时（1500ms 内）。成功即确认真实在线；连续失败两次可认为“虽连网但不可用”，触发降级逻辑。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

失败请求自动重试：离线暂存 + 上线触发

对关键操作（如表单提交、消息发送），不要等用户手动重试：

• 发起请求前先检查 navigator.onLine，若为 false，把请求参数存入 localStorage 或 IndexedDB，并标记为“待重试”
• 监听 online 事件，触发时遍历待重试队列，逐个发起请求
• 重试成功后从存储中移除；失败则保留并提示用户（避免无限重试）

UI 层友好反馈：让用户知道发生了什么

光后台处理不够，用户需要明确感知：

• 网络断开时禁用提交按钮，显示“网络已断开，正在保存草稿…”
• 恢复后自动重试时，在顶部 toast 提示“正在同步上次操作…”
• 可在页面角落固定一个状态指示器（如绿色圆点 / 红色感叹号），点击展开详情

不复杂但容易忽略。关键是把浏览器原生能力当起点，再用心跳和服务端配合补足短板，最后让 UI 和逻辑形成闭环。