Skip to content

在数据统计页面中,有时候需要一个接口请求不同的数据(参数不同),并且需要实时获取。因此需要每次打开页面都请求接口来保证数据的更新。这样子感觉有点太频繁了,那么有没有一种方案可以限制这种请求的频率呢?刚开始我想到了节流,说干就干,找到之前学习时对着视频敲的节流函数,复制粘贴一气呵成,稍微改吧改吧,请求缓存的第一次实现完成了。但是事与愿违,预期的效果并未达到,为什么呢?节流一般用于比如滚动条滚动这类场景,但是我目前的场景是我一打开数据统计页面,他就给我请求数据,并没有滚动条滚动时的持续性。因此节流的方案作废,此后,冥思苦想,终于让我想到了时间戳的方式,只要我把第一次请求的时间戳保存下来,然后与第二次请求的时间戳的差值与我预设的时间进行对比,超出则无效,在范围内则使用第一次的数据。那么,通过什么方式来实现呢?我想到了两种方案:

  1. vuex
  2. map映射(闭包)

这两种方案的共同点都是利用缓存。具体实现就是通过时间戳来判断当前缓存的数据是否过期。

考虑到项目中目前为止都没有用过vuex,此时因为一个请求缓存而去使用感觉不是很有必要,因此最终采用了map映射的方式。

实现步骤:

  1. 声明一个map数据结构,并声明一个默认的时间(你想多久请求一次接口
  2. 判断是否有缓存以及缓存是否过期
  3. 使用不用参数作为map结构的键,将请求到的数据作为值结合当前时间戳保存到map结构
javascript
// cache.js
const cache = new Map();

// 设置缓存有效期,单位为毫秒
const DEFAULT_CACHE_TIME = 10000; // 10s

export function fetchWithCache(key, fetchFunction) {
 const cachedData = cache.get(key);
 if (cachedData && (Date.now() - cachedData.timestamp) < DEFAULT_CACHE_TIME) {
  // 缓存数据有效,返回缓存
  return Promise.resolve(cachedData.data);
 }

 // 如果没有缓存,或者缓存过期,则发起请求
 return fetchFunction().then(result => {
  cache.set(key, {
   data: result,
   timestamp: Date.now()
  });
  return result;
 });
}