Vue中Axios配置客户端缓存的核心是按需缓存：静态资源用强缓存，API设合理Cache-Control（如public, max-age=300），避免请求头禁用缓存；必要时URL加时间戳破缓存；组件内可手动内存缓存并校验过期。
Vue 中用 Axios 配置客户端缓存，核心是让浏览器复用已请求过的响应，避免重复发请求、节省带宽。关键不在“禁用缓存”，而在于“按需缓存”——静态资源走强缓存，API 接口设合理过期时间，并配合前端逻辑协同控制。
设置 Cache-Control 请求头控制缓存行为
Axios 本身不自动读取 HTTP 缓存，但浏览器会根据响应头决定是否复用。要启用缓存，需服务端返回合适的 Cache-Control（如 public, max-age=300），同时确保 Axios 请求未显式禁用缓存：
- 避免在请求中加
'cache-control': 'no-cache'或'Pragma': 'no-cache' - 若用
axios.get(url, { headers: {...} })，不要覆盖默认缓存策略 - 推荐用原生
fetch（默认尊重 HTTP 缓存），或为 axios 配置cache: 'default'（需适配底层 adapter）
URL 参数防缓存（仅用于需要强制刷新的场景）
开发调试或数据强实时场景下，可临时绕过缓存。不是“配置缓存”，而是“主动打破缓存”：
- 在 URL 后拼时间戳：
/api/user?id=123&t=${Date.now()} - 或用随机数：
/api/user?id=123&_=${Math.random()} - 注意：上线前应移除，否则彻底失去缓存收益
前端内存缓存 + 过期判断（组件级精准控制）
对同一接口相同参数的请求，在组件内手动缓存响应并加时效逻辑，比纯 HTTP 缓存更可控：
立即学习“前端免费学习笔记（深入）”；
- 用 ref 或 reactive 存缓存对象：
const cache = ref({ data: null, timestamp: 0, expires: 5 * 60 * 1000 }) - 请求前检查：
if (cache.value.data && Date.now() - cache.value.timestamp ，直接返回缓存 - 命中缓存时跳过 axios 调用；未命中则请求并更新缓存
- 适合商品详情、用户资料等变化不频繁的页面
拦截重复请求（防同一时刻多次发起）
用户快速点击或组件反复挂载时，易触发完全相同的请求。可在 axios 拦截器中用请求标识去重：
- 生成唯一 key：
`${config.method}-${config.url}-${JSON.stringify(config.params || config.data)}` - 请求前查 pending map，存在则 cancel 当前请求或返回已有 promise
- 响应/失败后清理该 key，保证后续新请求可正常发出
- 这不减少带宽，但避免无意义并发，提升响应确定性
