React fetch()缓存过期设置求助：自定义浏览器缓存时长

我来帮你搞定这个Fetch缓存的问题！你遇到的情况其实挺常见的，咱们一步步拆解原因和解决方案：

为什么你的代码没生效？ #

先说说你碰到的两个问题：

1. cache: 'force-cache' 生效但没法控制过期：这个选项只是让浏览器优先使用本地缓存（如果存在的话），但缓存的过期规则完全由服务器返回的响应头决定，你没法通过这个参数自定义时长。
2. 手动加Cache-Control: max-age=30请求头无效：客户端发送的Cache-Control请求头，主要是告诉服务器「我能接受多久之前的缓存内容」，但最终浏览器是否缓存、缓存多久，还是看服务器返回的Cache-Control响应头。如果服务器没配置这个响应头，浏览器根本不会缓存你的请求结果，自然看不到效果。

解决方案1：标准HTTP缓存（推荐） #

这是最靠谱的方式，通过服务器配置响应头来控制缓存时长，浏览器会自动帮你处理缓存的过期、验证逻辑。

举个Node.js/Express的例子，服务器端设置响应头：

app.get('/get/id', (req, res) => {
  // 设置缓存30秒：public表示允许所有缓存（包括CDN），max-age=30是缓存有效时长
  res.setHeader('Cache-Control', 'public, max-age=30');
  // 如果需要更灵活的过期（比如5分钟），改成max-age=300即可
  res.json({ id: 123, content: 'your data' });
});

客户端只需要用普通的Fetch请求就行，不用额外加缓存相关配置：

fetch('/get/id', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(data => console.log(data));

浏览器会自动缓存结果30秒，30秒内重复请求直接用缓存，过期后才会向服务器发起新请求。

解决方案2：客户端手动实现缓存（适合服务器无法修改的场景） #

如果服务器没法配置响应头，你可以在客户端用本地存储（localStorage/IndexedDB）自己实现自定义缓存逻辑，核心思路是存储请求结果+时间戳，每次请求前检查是否过期。

下面是一个可复用的封装函数：

async function fetchWithCustomCache(url, cacheSeconds = 30) {
  // 生成唯一的缓存键，避免不同URL的缓存冲突
  const cacheKey = `fetch_cache_${encodeURIComponent(url)}`;
  const cachedItem = localStorage.getItem(cacheKey);

  if (cachedItem) {
    const { data, timestamp } = JSON.parse(cachedItem);
    // 计算当前时间与缓存时间的差值，判断是否过期
    const isExpired = Date.now() - timestamp >= cacheSeconds * 1000;
    
    if (!isExpired) {
      console.log(`使用缓存（剩余有效期：${Math.floor((cacheSeconds * 1000 - (Date.now() - timestamp))/1000)}秒）`);
      return JSON.parse(data);
    }
    // 缓存过期，删除旧缓存
    localStorage.removeItem(cacheKey);
  }

  // 缓存不存在或过期，发起真实请求
  const response = await fetch(url, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  });
  
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  
  const data = await response.json();
  
  // 将结果和时间戳存入localStorage
  localStorage.setItem(cacheKey, JSON.stringify({
    data: JSON.stringify(data),
    timestamp: Date.now()
  }));

  return data;
}

// 使用示例：缓存5分钟（300秒）
fetchWithCustomCache('/get/id', 300)
.then(data => console.log('请求结果：', data))
.catch(err => console.error(err));

注意事项： #

• localStorage存储容量有限（一般5MB），如果是大体积数据，建议改用IndexedDB。
• 这种客户端缓存和浏览器HTTP缓存是独立的，不会互相影响。
• 如果需要缓存失效的更灵活控制（比如手动清除缓存），可以在函数里加清除缓存的逻辑。

补充：混合使用两种方式 #

如果你想让浏览器优先用HTTP缓存，同时在客户端做额外的缓存兜底，可以结合两种方式。比如先尝试HTTP缓存（用cache: 'default'），如果请求失败或需要更长期的缓存，再用客户端存储。

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