处理请求缓存

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

1. vuex
2. map映射（闭包）

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

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

实现步骤：

1. 声明一个map数据结构，并声明一个默认的时间（你想多久请求一次接口）
2. 判断是否有缓存以及缓存是否过期
3. 使用不用参数作为map结构的键，将请求到的数据作为值结合当前时间戳保存到map结构

// 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;
	});
}