JS无法真正模拟离线，但可通过Service Worker拦截请求返回Mock数据、MSW动态控制mock、或在请求层手动判断navigator.onLine并返回兜底数据来模拟离线效果。
前端网络断开时，JS 本身无法主动“模拟”离线状态，但可以通过拦截请求、伪造响应的方式，在开发或测试阶段模拟用户处于离线环境的效果。关键不是让浏览器真断网，而是让应用在检测到网络异常或主动切换为离线模式时，走 Mock 数据逻辑。
用 Service Worker 拦截请求并返回 Mock 响应
Service Worker 是最贴近真实离线场景的方案，它能在网络请求发出前就捕获并响应，即使设备已断网也能返回预设数据。
- 注册一个 Service Worker，在
fetch事件中判断当前网络状态（navigator.onLine）或手动开关“离线模式” - 若处于离线状态，匹配 URL 规则，直接用
Response.json()返回 Mock 数据，不发起真实请求 - 注意：首次注册 SW 需要页面加载完成且有 HTTPS（或 localhost），且需手动刷新一次才能生效
用 Mock 库（如 Mock.js 或 MSW）配合网络状态控制
MSW（Mock Service Worker）更推荐，它基于 Service Worker，但提供更友好的 API；Mock.js 则适合简单场景（仅拦截 Ajax，不支持 fetch）。
- MSW 中可定义
setupWorker，并在测试或调试时调用worker.stop()模拟断网，或用worker.use(...)动态启用/禁用 mock handler - 结合
window.addEventListener('offline', ...)和online事件，自动切换 mock 策略 - 例如：监听到
offline事件后，启用一组返回固定错误码（如 0 或 503）或兜底数据的 handlers
手动控制请求逻辑：在请求层统一处理离线分支
不依赖底层拦截，而是在业务请求封装层（如 axios 实例或自定义 apiClient）中加入离线判断。
立即学习“前端免费学习笔记（深入）”；
- 检查
navigator.onLine === false，或读取全局变量（如window.__MOCK_OFFLINE = true） - 若为离线，跳过真实请求，直接 resolve 对应的 Mock 数据（可按接口路径映射 JSON 文件或对象）
- 适合快速验证 UI 在无网时的表现，也便于 QA 手动触发离线态（比如加个调试按钮）
补充：如何可靠检测“真正断网”？
navigator.onLine 只反映浏览器是否认为联网（如 Chrome 断 WiFi 后会立刻变 false，但连着假路由可能仍为 true），不能完全信任。
- 更稳妥的做法是：发一个轻量心跳请求（如
/health），超时或失败即判定为离线，并缓存该状态几秒避免频繁探测 - 将该状态与 Mock 开关联动，比如心跳失败时自动启用离线 mock 策略
