离线队列通过监听网络状态、缓存请求并自动重试实现可靠重发：1. 用 navigator.onLine 与 online/offline 事件检测切换；2. 内存队列存可序列化请求对象，含唯一ID和重试次数；3. sendRequest 统一处理在线直发与失败入队。
网络断开时，JavaScript 可以通过监听连接状态、缓存待发请求、并在恢复后自动重试，实现离线队列的可靠重发。核心在于：检测离线、暂存请求、监听上线、逐个重试。
监听网络状态变化
用 window.navigator.onLine 判断当前是否在线，配合 online 和 offline 事件实时响应网络切换：
-
online触发时，启动队列重试逻辑 -
offline触发时，暂停新请求发送，转为入队缓存 - 注意：
navigator.onLine只反映浏览器是否认为联网（如断网但未刷新页面，可能仍返回true），建议结合 fetch 超时或 4xx/5xx 响应做二次确认
构建内存请求队列
用数组或 Map 存储待发请求的配置（URL、method、body、headers 等），推荐封装成可序列化的 plain object：
- 每个队列项包含唯一 ID（便于去重或失败标记）和重试次数（避免无限循环）
- 避免直接存函数或 Promise，防止闭包引用泄漏或状态失效
- 示例结构：
{ id: 'req-1', url: '/api/log', method: 'POST', body: JSON.stringify({ msg: 'error' }), retries: 0 }
请求发送与失败捕获逻辑
所有 API 调用统一走封装的 sendRequest() 方法：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 若在线，直接 fetch；若失败（网络错误、超时、非 2xx 响应），且重试次数 retries
- 若离线，直接入队，不发起请求
- fetch 时设置
signal+AbortController控制超时（如 8s），避免卡死
上线后自动重试队列
监听到 online 事件后，遍历队列并逐个重发：
- 使用
setTimeout或Promise.allSettled控制并发（如每次最多 3 个），防服务端压力突增 - 成功则从队列删除；失败且重试达上限，可触发上报、本地存储（IndexedDB）持久化，或通知用户
- 重试间隔建议指数退避（如 1s → 2s → 4s），避免密集轮询
不复杂但容易忽略细节：确保队列操作是幂等的，后端接口需支持重复提交（如用 request-id 去重），前端也要避免同一请求被多次加入队列。
