vue中axios本地缓存核心是拦截请求、生成稳定缓存键（url+排序后query）、localstorage存取带时间戳数据，并在拦截器中实现查缓存→命中则返回、未命中则发请求并写入，支持手动清缓存与强制刷新。
Vue 中用 Axios 实现接口数据的本地缓存与有效期校验，核心在于拦截请求、生成唯一缓存键、读写 localStorage、检查时间戳。不依赖第三方库，纯 JS 就能完成，关键是要把“缓存逻辑”和“过期判断”做进请求流程里。
缓存键要稳定可复用
同一接口不同参数必须生成不同 key，相同参数必须一致。推荐用 URL + 排序后的 query 参数拼接：
- 对 params 对象按键字母排序，再序列化（避免 {a:1,b:2} 和 {b:2,a:1} 产生不同 key）
- URL 不带协议和域名，只取 path + query 部分，例如
/api/regions?level=city - 最终 key 示例：
"api/regions?level=city"，方便存取和清理
缓存存到 localStorage 并带时间戳
内存缓存重启就丢，生产环境建议用 localStorage。每次写入时一并保存响应数据和当前时间：
- 存入格式：
{ data: response.data, timestamp: Date.now(), maxAge: 3600000 }（1小时） - 读取时先解析 JSON，再比对
Date.now() - item.timestamp - 过期则自动丢弃，走正常请求；未过期直接 resolve 缓存数据
在 Axios 拦截器里统一处理
把缓存逻辑放在请求拦截器和响应拦截器之间最合理——请求前查缓存，命中就阻断发送；响应后存新数据：
- GET 请求且配置了
cache: true时，先尝试从 localStorage 读取 - 命中且未过期 → 直接返回 Promise.resolve({ data: cachedData })
- 未命中或已过期 → 正常发请求，成功后写入 localStorage（含时间戳和 maxAge）
- POST/PUT 等非幂等请求默认不缓存，或手动设
cache: false强制跳过
支持手动清缓存和按需刷新
缓存不是一劳永逸，得提供可控入口：
- 封装
clearCache(key)方法，支持清除单个 key 或通配符匹配（如clearCache('api/regions*')） - 某些操作后主动失效相关缓存，比如修改省市区数据后调用
clearCache('api/regions') - 全局加一个
forceRefresh: true配置项，强制跳过缓存走网络（适合下拉刷新场景）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
