vue 3 中缓存应由组合式函数（如 usecachedrequest）封装实现，拦截器仅辅助维护；组合式函数负责缓存读写、ttl 控制与状态管理，拦截器适合全局行为（如加 token），不直接处理业务缓存逻辑。
Vue 3 中请求拦截器本身不直接管理本地缓存，它只负责在请求发出前或响应返回后插入逻辑；真正实现请求缓存的，是组合式函数（Composables）配合响应式状态、内存缓存策略（如 Map）或持久化存储（如 localStorage），再通过拦截器统一注入缓存读写时机。
缓存逻辑应由组合式函数封装，而非拦截器
拦截器（如 axios 的 request/response 拦截器）适合做「全局行为」：加 token、埋点、统一错误提示、触发 loading。但缓存具有强业务语义——哪些接口可缓存、缓存多久、是否允许 stale 数据、是否需强制刷新——这些决策必须在调用层明确，不能全交给拦截器“自动处理”，否则会丢失控制权、引发数据不一致。
推荐做法是：用一个组合式函数（例如 useCachedRequest）封装完整的请求 + 缓存生命周期，内部可调用 axios 实例，同时自行管理缓存读写。拦截器仅作为辅助，比如在响应拦截器中自动更新缓存时间戳或清理过期项。
用组合式函数实现带 TTL 的内存缓存
以下是一个轻量但实用的缓存 Composable 示例：
- 使用 Map 存储响应数据与过期时间戳
- 每次请求前先查缓存，命中且未过期则跳过网络请求
- 响应成功后自动写入缓存，并设置 TTL（如 5 分钟）
- 暴露 refresh() 方法强制重新拉取
代码示意（src/composables/useCachedRequest.ts）：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
import { ref, computed } from 'vue'<br>import { axiosInstance } from '@/utils/request'<br><br>// 全局缓存 Map: key = url + JSON.stringify(params)<br>const cache = new Map<string data: any expiresat: number>()<br><br>export function useCachedRequest(url: string, params?: Record<string any>, options: { ttl?: number } = {}) {<br> const { ttl = 5 * 60 * 1000 } = options // 默认 5 分钟<br> const cacheKey = `${url}?${new URLSearchParams(params || {}).toString()}`<br><br> const data = ref<any>(null)<br> const loading = ref(false)<br> const error = ref<any>(null)<br><br> const isCached = computed(() => {<br> const item = cache.get(cacheKey)<br> return item && Date.now() })<br><br> const execute = async () => {<br> if (isCached.value) {<br> data.value = cache.get(cacheKey)!.data<br> return<br> }<br><br> loading.value = true<br> try {<br> const res = await axiosInstance.get(url, { params })<br> data.value = res.data<br> cache.set(cacheKey, {<br> data: res.data,<br> expiresAt: Date.now() + ttl<br> })<br> } catch (e) {<br> error.value = e<br> } finally {<br> loading.value = false<br> }<br> }<br><br> const refresh = () => {<br> cache.delete(cacheKey)<br> return execute()<br> }<br><br> return { data, loading, error, execute, refresh, isCached }<br>}</any></any></string></string>
拦截器辅助缓存维护（可选增强）
如果项目中已有 axios 拦截器，可以利用响应拦截器做两件事：
- 自动标记响应是否来自缓存（例如添加 x-cache: HIT/MISS 头），便于调试和监控
- 当服务端返回特定状态码（如 304 Not Modified）时，在拦截器中主动更新本地缓存的过期时间，避免重复失效
注意：不要在请求拦截器里“偷偷”返回缓存数据——这会绕过组合式函数的状态管理和副作用（如 loading 切换、错误重试），破坏响应式链路。
进阶：支持 localStorage 持久化缓存
对登录态下用户偏好类数据（如菜单配置、主题设置），可扩展缓存策略：
- 为特定 key 启用持久化：写入前序列化并存入 localStorage
- 读取时优先从 localStorage 尝试恢复，再 fallback 到网络
- 监听 storage 事件，实现多标签页缓存同步（可选）
这类逻辑仍应封装在组合式函数内，而不是塞进拦截器——保持关注点分离，让缓存策略可测试、可开关、可按接口定制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
