断网时点了 5 次提交,恢复网络后后台生成 10 条记录,每条重复两次。队列里的请求被重放了两遍。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
window.addEventListener('online', flushQueue, { once: true });
const pending = new Map(queue.map(q => [q.id, q]));
在线恢复事件绑定了两次,恢复时两处逻辑各扫一遍队列。入队没有按业务 id 去重,重放也没有带幂等键。这一点先确认清楚,后面就不用反复试。
「离线请求队列」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
具体做法是,恢复监听只注册一次 放在应用初始化处;入队前按业务 id 去重 已存在就更新;请求头带幂等键 服务端兜底;断网提交五次再恢复 核对后台条数。
改完照着核一遍,断网五次提交恢复后后台只有 5 条记录,重复请求返回同一结果。
