缓存与预加载

你可以通过设置 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 或者是所有的缓存数据。

自定义缓存

通过配置 setCache 和 getCache，可以自定义数据缓存，比如可以将数据存储到 localStorage、sessionStorage 等。

setCache 和 getCache 需要配套使用。
在自定义缓存模式下，cacheTime 和 clearCache 不会生效，请自行实现。

# 缓存 与 预加载

# 缓存时间

# 保鲜时间

# 请求共享

# 动态 cacheKey

# 清除缓存