axios-cache-interceptor中hydrate()函数无法触发问题求助

你的hydrate回调未被调用的核心原因是缺少staleWhileRevalidate配置。

axios-cache-interceptor的hydrate机制依赖于staleWhileRevalidate选项：只有当该选项开启时，缓存过期后才会先返回过期的缓存数据（此时触发hydrate回调），同时在后台发起网络请求获取最新数据并更新缓存。如果没有开启这个选项，缓存过期后会直接发起新的网络请求，不会触发hydrate。

修复步骤 #

1. 全局配置添加staleWhileRevalidate #

修改你的组合式函数中的缓存配置，开启staleWhileRevalidate：

const cacheOptions: CacheOptions = {
  debug: console.warn,
  headerInterpreter: undefined,
  interpretHeader: false,
  methods: ['get', 'post'],
  storage: buildWebStorage(localStorage, 'cache:'),
  ttl: 10,
  // 开启 stale-while-revalidate 机制
  staleWhileRevalidate: true 
}
const instance = setupCache(axios.create(), cacheOptions)

2. 确认请求级配置兼容 #

如果需要针对单个请求单独配置，也可以在请求的cache选项中设置staleWhileRevalidate（全局配置会被请求级配置覆盖）：

const response = await axiosInstance.post(
  url,
  { filters: customFilters },
  {
    ...options,
    cache: {
      hydrate: (cache: StorageValue) => console.log('received for hydration:', cache.data),
      staleWhileRevalidate: true // 单个请求开启
    }
  }
)

验证逻辑 #

配置完成后，当缓存过期时：

1. 会立即触发hydrate回调，传入过期的缓存数据
2. 后台自动发起网络请求获取最新数据
3. 最新数据返回后会更新缓存，同时后续请求会使用新的缓存数据

内容的提问来源于stack exchange，提问作者René Uittenbogaard