Node.js SPA访客计数多次递增问题求助（页面重载异常）

1. 服务器端文件操作的竞态与原子性问题 #

直接用fs.readFile和fs.writeFile处理count.txt时，异步操作容易引发竞态：哪怕你看到网络面板只有一个请求，也可能存在浏览器后台发起的隐藏请求（比如预加载、路由预渲染），多个请求同时读取文件后各自加1写入，就会导致计数多增。

排查&解决：

• 改用原子性文件操作，比如用fs.writeFile的flag: 'wx'（文件存在则写入失败）配合重试逻辑，或者用fs.promises链式调用确保读写顺序；
• 临时改用内存缓存+定时持久化：把计数存在内存变量里，每隔30秒写入一次文件，避免频繁读写文件的竞态问题。

2. 浏览器预加载/预渲染干扰 #

宽屏模式下部分浏览器会触发预加载功能（比如Chrome的「预加载页面」），后台悄悄发起重复请求，这类请求可能不会在常规网络面板列表显示，需要切换到「预加载」标签查看。

排查：

• 打开浏览器网络面板，切换到「全部」标签，筛选/api/visitor-count，查看是否有多个请求（包括标记为「预加载」类型的）；
• 临时关闭浏览器预加载功能（Chrome：设置→隐私和安全→预加载页面以提高浏览速度），测试计数是否恢复正常。

3. Express路由/中间件重复注册 #

如果你的/api/visitor-count路由或相关中间件被重复注册（比如在循环里调用、模块被多次require），会导致服务器端对同一个请求执行多次计数逻辑。

排查：

• 检查路由注册代码，确保app.get('/api/visitor-count', ...)只被调用一次；
• 在接口处理函数开头加console.log('收到计数请求')，查看控制台是否多次打印，确认服务器端是否收到重复请求。

4. 文件锁或权限问题（功能突然失效） #

Windows系统下，count.txt可能被杀毒软件、文件预览工具等进程锁定，导致Node.js无法读写，表现为计数失效；重启电脑后锁被释放，功能暂时恢复，但后续可能再次触发。

排查：

• 给文件操作代码加上错误捕获，打印详细错误信息：

app.get('/api/visitor-count', async (req, res) => {
  try {
    let count = parseInt(await fs.promises.readFile('count.txt', 'utf8')) || 0;
    count++;
    await fs.promises.writeFile('count.txt', count.toString());
    res.json({ count });
  } catch (err) {
    console.error('文件操作错误:', err);
    res.status(500).json({ error: '计数失败' });
  }
});

• 观察控制台是否出现EBUSY（文件被占用）类错误，同时检查count.txt的读写权限是否正常。

5. SPA生命周期的重复触发 #

虽然你确认前端只触发一次fetch，但SPA框架的生命周期可能导致重复调用：比如React的useEffect未加依赖数组，每次组件渲染都执行fetch；或者路由切换时组件重复挂载。

排查：

• 在前端fetch代码处加console.log('发起计数请求')，查看浏览器控制台是否多次打印；
• 检查组件生命周期钩子，确保fetch只在组件首次挂载时调用一次（比如React的useEffect(() => { fetch(...); }, [])，Vue的onMounted）。

内容的提问来源于stack exchange，提问作者Kaine Odurukwe