JS中Fetch请求是否缓存响应？切换用户后遇缓存异常

一、切换用户后GET请求缓存异常问题 #

你设置了cache: 'no-cache'但仍出现缓存残留，是因为这个选项仅要求浏览器验证缓存有效性，而非强制跳过缓存。可以尝试以下几种方案：

1. 改用强制刷新的缓存选项
   将fetch的cache参数替换为'reload'，强制浏览器直接从服务器拉取最新数据：

fetch(`${runtimeConfig.public.apiBase}/orders/${route.params.id}`, {
  method: 'GET',
  cache: 'reload', // 替换原有的no-cache
  headers: {
    'Authorization': `Bearer ${token.value}`
  }
})

2. 添加严格的缓存控制请求头
   如果reload仍无效，在请求头里补充更明确的缓存禁止指令：

headers: {
  'Authorization': `Bearer ${token.value}`,
  'Cache-Control': 'no-store, no-cache, must-revalidate',
  'Pragma': 'no-cache',
  'Expires': '0'
}

3. URL添加随机参数（兜底方案）
   如果以上方法都不生效，可在URL末尾拼接时间戳或随机字符串，让浏览器识别为全新请求：

const timestamp = new Date().getTime();
fetch(`${runtimeConfig.public.apiBase}/orders/${route.params.id}?t=${timestamp}`, {
  // 其他配置保持不变
})

二、删除请求后列表出现空元素问题 #

浏览器返回的列表多了{order_id:0, name: ''}但Postman无此元素，大概率是前端响应处理环节的问题：

• 检查删除后获取列表的代码，是否在初始化数组时默认添加了空对象，或是解析响应时把undefined/null转换成了空对象。
• 可在获取列表后手动过滤无效数据：

// 假设list是接口返回的列表数据
const validOrders = list.filter(item => item.order_id > 0 && item.name.trim() !== '');
// 将过滤后的validOrders赋值给你的响应变量

另外也可以检查获取列表的fetch响应解析逻辑，是否存在JSON解析异常导致的默认值填充情况。

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