监听popstate调用函数却无法加载最新数据库数据的问题

问题出在浏览器缓存机制：当通过回退按钮返回页面时，浏览器会优先从本地缓存中读取之前请求过的http://localhost:4000接口数据，而非重新向服务器发起请求——哪怕数据库已经更新，fetch拿到的依然是旧缓存数据。手动刷新时浏览器会强制触发全新请求，因此能获取最新数据。

方法1：修改fetch的缓存配置 #

在fetch请求中明确指定缓存策略，强制浏览器跳过缓存、重新请求：

function getItemsFromDB() {
  fetch('http://localhost:4000', {
    cache: 'reload' // 强制从服务器获取最新数据，不使用缓存
    // 也可以用 cache: 'no-cache'，表示先验证缓存是否有效，无效则请求服务器
  })
  .then(res => res.json())
  .then(data => {
    console.log('RESP', data);
    // 这里执行页面数据更新逻辑
  })
  .catch(err => console.error('请求失败:', err));
}

方法2：给URL添加随机参数 #

通过在URL后追加唯一的时间戳或随机数，让浏览器认为这是一个全新的请求，从而绕过缓存：

function getItemsFromDB() {
  // 用当前时间戳作为查询参数，保证每次请求URL唯一
  const requestUrl = `http://localhost:4000?_=${new Date().getTime()}`;
  fetch(requestUrl)
  .then(res => res.json())
  .then(data => {
    console.log('RESP', data);
    // 更新页面内容
  })
  .catch(err => console.error('请求失败:', err));
}

补充：服务器端配置（推荐） #

如果有权限修改服务器配置，可以在http://localhost:4000接口的响应头中添加缓存禁止指令，从根源上避免浏览器缓存该接口数据：

Cache-Control: no-store, no-cache, must-revalidate, max-age=0

这样无论前端怎么请求，浏览器都不会缓存该接口的返回结果。

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