axios-cache-interceptor：无法让 Hydro() 工作

Question

我正在与

合作一个项目

• Vue 3.3.2
• 打字稿5.0.4
• Axios 1.6.7
• axios-缓存拦截器 1.5.1

我想使用水合物功能。

如果我理解正确的话，当axios-cache-interceptor在缓存中发现过期数据时，它应该调用cache.Hydrate回调函数传递过期数据，然后一旦网络请求返回最新数据，退货吧。

但是，我的 Hydrate() 回调函数没有被调用。

我尝试过以下方法。请注意，这只是一个 POST 请求，因为可能存在大量过滤器。它实际上并没有在服务器端创建任何东西。

  const axiosInstance = getAxiosInstance()
  const response = await axiosInstance.post(
    url,
    {
      filters: customFilters
    },
    {
      ...options,
      cache: {
        hydrate: (cache: StorageValue) => console.log('received for hydration:', cache.data)
      }
    }
  )

在可组合项中，我有：

const cacheOptions: CacheOptions = {
  debug: console.warn,
  headerInterpreter: undefined,
  interpretHeader: false,
  methods: ['get', 'post'],
  storage: buildWebStorage(localStorage, 'cache:'),
  ttl: 10
}
const instance = setupCache(axios.create(), cacheOptions)

function getAxiosInstance() {
  ...
  return instance
}

我观察到，当我将

ttl

设置为较大值时，数据将被缓存并在下一个请求时从缓存中提供。 当我将

ttl

设置为一个较小的值时，每个新请求都会触发一个新的往返，但不会调用 Hydro() 回调。

我是否忽略了什么？

Answer 1

事实证明，由于响应中的 Cache-Control 标头，缓存内容被认为不是“陈旧”而是已过期，特别是“必须重新验证”、“无缓存”、“无陈旧”。

通过确保使用正确的 Cache-Control: 标头发送响应数据，问题得到解决：

缓存控制：max-age=15，stale-while-revalidate=1800