缓存 与 预加载

你可以通过设置 cacheKey 来启用缓存功能。当缓存启用后 VueRequest 会把当前请求的结果缓存下来,等到下次该组件初始化时,亦或者另外一个设置了同样 cacheKey 的请求初始化时,如果有缓存,则会优先返回缓存的数据,然后再在背后发起新的请求。这样就确保数据以最快的数据展现在用户面前,这也是预加载的一种形式。

缓存时间

你还可以设置缓存的回收时间。当缓存数据的时间超过了设定的 cacheTime (默认为 600000 毫秒,即 10 分钟),VueRequest 会自动丢弃该缓存的数据,等到下次发起请求后,重新缓存新的数据。

const { data } = useRequest(getJobType, {
  cacheKey: 'JobType',
  cacheTime: 5 * 60 * 1000, // 5 minutes
});


 

保鲜时间

如果你能确保缓存下来的数据,在一定时间内不会有任何更新的,你可以设置一个保鲜时间 staleTime (默认为 0,即不保鲜), 当设置保鲜时间后,VueRequest 在该时间内会认为缓存的数据是新鲜的,从而不会发起新的请求,这能为一些定时更新的接口减轻请求的压力。

const { data } = useRequest(getJobType, {
  cacheKey: 'JobType',
  staleTime: 60 * 60 * 1000, // 60 minutes
});


 

请求共享

当拥有相同的 cacheKey 时,同时只会有一个在发起请求,后发起的将会共用同一个请求。

下面的示例中,两个组件的内容永远都是同步的,且同时触发时只会发起一个请求。

你可以打开控制台,然后分别点击 run 按钮,查看控制台打印的信息

动态 cacheKey

cacheKey 除了可以传入一个字符串以外,还支持传入一个函数。params 作为函数的参数传入,并返回一个字符串作为最终的 cacheKey。通过该函数可实现动态 cacheKey 的功能。

提示

cacheKey 函数的入参 params 在初始化时为 undefined,因此

  • manual = false 时:返回一个默认参数生成的 key 或者是 空字符串。
  • manual = true时:直接返回空字符串。

参考以下例子。

const { data } = useRequest(getJobType, {
  manual: true,
  cacheKey: params => {
    if (params && params[0]) {
      return `JobType-${params[0]}`;
    }
    return '';
  },
  staleTime: 60 * 60 * 1000, // 60 minutes
});

你可以通过下面示例来体验效果

你可以打开控制台,然后切换 radio 选项,并查看控制台打印的信息

清除缓存

VueRequest 提供了一个 clearCache 方法,可以清除指定 cacheKey 或者是所有的缓存数据。

自定义缓存

通过配置 setCachegetCache,可以自定义数据缓存,比如可以将数据存储到 localStoragesessionStorage 等。

  • setCachegetCache 需要配套使用。
  • 在自定义缓存模式下,cacheTimeclearCache 不会生效,请自行实现。
上次更新: 7/1/2022, 8:28:34 AM
贡献者: John