前端也能检测网络状态？online/offline 事件实战
在现代 Web 应用中，良好的用户体验往往离不开对网络状态的感知。试想一下：用户正在填写一个复杂的表单，突然断网了，如果页面没有任何提示，用户可能会误以为提交成功，结果数据却丢失了——这无疑是一场灾难。
幸运的是，浏览器早已为我们提供了原生的网络状态检测能力！无需依赖第三方库，仅凭 JavaScript 就能轻松监听设备是否在线或离线。今天，我们就来深入探讨 online 和 offline 事件的使用方法，并通过实战案例展示如何提升应用的健壮性与用户体验。
一、什么是 online / offline 事件？
HTML5 标准中定义了两个全局事件：
online：当浏览器从离线状态变为在线状态时触发。offline：当浏览器从在线状态变为离线状态时触发。
这两个事件会冒泡到 window 对象，因此我们可以通过监听 window 来捕获网络状态的变化。
📌 注意：这里的“在线”指的是设备是否连接到网络（如 Wi-Fi、蜂窝数据等），并不代表一定能访问你的服务器。它只是操作系统层面的网络连通性判断。
二、基础用法示例
// 监听在线事件 window.addEventListener('online',()=>{ console.log('网络已恢复！');// 可在此处重新尝试发送失败的请求});// 监听离线事件 window.addEventListener('offline',()=>{ console.log('网络已断开！');// 可在此处提示用户并暂停自动同步});你也可以使用传统的 ononline / onoffline 属性写法：
window.ononline=()=>alert('你上线啦！'); window.onoffline=()=>alert('你掉线啦！');三、获取当前网络状态
除了监听变化，我们还可以随时检查当前是否在线：
if(navigator.onLine){ console.log('当前在线');}else{ console.log('当前离线');}navigator.onLine 是一个只读布尔值，实时反映当前网络状态。
四、实战案例：离线时禁用提交按钮 + 恢复后自动重试
假设我们有一个表单，用户填写后点击“提交”。我们希望在网络断开时禁用按钮并提示用户；网络恢复后，自动重试之前失败的提交。
HTML 结构
<formid="myForm"><inputtype="text"id="message"placeholder="输入内容..."required/><buttontype="submit"id="submitBtn">提交</button></form><divid="status"></div>JavaScript 实现
const form = document.getElementById('myForm');const submitBtn = document.getElementById('submitBtn');const statusEl = document.getElementById('status');let pendingData =null;// 存储待重试的数据// 检查初始状态updateNetworkStatus();// 监听网络变化 window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline);functionupdateNetworkStatus(){if(navigator.onLine){ statusEl.textContent ='✅ 在线'; statusEl.style.color ='green'; submitBtn.disabled =false;}else{ statusEl.textContent ='❌ 离线，请检查网络'; statusEl.style.color ='red'; submitBtn.disabled =true;}}functionhandleOnline(){ console.log('网络恢复');updateNetworkStatus();// 如果有挂起的数据，尝试重新提交if(pendingData){ statusEl.textContent ='🔄 正在重试提交...';submitData(pendingData).then(()=>{ pendingData =null; statusEl.textContent ='✅ 提交成功！';}).catch(()=>{ statusEl.textContent ='⚠️ 重试失败，请手动重试';});}}functionhandleOffline(){ console.log('网络断开');updateNetworkStatus();}// 表单提交 form.addEventListener('submit',async(e)=>{ e.preventDefault();const message = document.getElementById('message').value;if(!navigator.onLine){ statusEl.textContent ='❌ 离线无法提交，请稍后再试'; pendingData = message;// 保存数据用于重试return;}try{awaitsubmitData(message); statusEl.textContent ='✅ 提交成功！'; form.reset();}catch(err){ statusEl.textContent ='⚠️ 提交失败，请重试'; pendingData = message;// 保存失败数据}});// 模拟 API 请求functionsubmitData(data){returnnewPromise((resolve, reject)=>{setTimeout(()=>{// 模拟 80% 成功率 Math.random()>0.2?resolve():reject(newError('网络错误'));},1000);});}💡 这个例子展示了如何结合 navigator.onLine 和事件监听，构建一个具备基本离线容错能力的表单。
五、注意事项与局限性
- 不等于服务可用性
navigator.onLine === true仅表示设备联网，不代表你的后端服务可达。仍需配合fetch的错误处理。 - 某些浏览器行为不一致
- 在部分旧版浏览器（如 IE）中，只要插上网线就认为是“在线”，即使没有实际网络。
- 移动端切换网络（如从 Wi-Fi 切到 4G）可能不会立即触发事件。
- PWA 场景更强大
如果你使用 Service Worker（如 PWA 应用），可以结合 Cache API 实现真正的离线体验，而不仅仅是状态提示。
六、进阶建议
- 结合 Toast 提示：使用 UI 组件库（如 Ant Design、Element Plus）弹出友好通知。
- 记录离线操作日志：将用户在离线期间的操作暂存到
localStorage，恢复后批量同步。 - 降级策略：离线时提供只读视图或本地缓存数据，避免功能完全瘫痪。
结语
虽然 online / offline 事件看似简单，但它为前端开发者打开了一扇通往“感知网络”的大门。合理利用这一能力，不仅能提升用户体验，还能增强应用的鲁棒性。
下次当你看到“网络已断开，请检查连接”的提示时，不妨想想——这背后，也许就是一段优雅的 window.addEventListener('offline', ...) 代码在默默守护着用户的数据安全。
