详解前端API请求缓存方案

调用方式：

queryAll('wares').then( ... )  
// 第二次调用 不会去取 wares，只会去skus  
queryAll(['wares', 'skus']).then( ... )  

方案四 添加时间有关的缓存

往往缓存是有危害的，如果我们在知道修改了数据的情况下，直接把 cache 删除即可，此时我们调用方法就可以向服务器进行请求。这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作，那么此时旧的数据就一直存在，那么我们最好规定个时间来去除数据。

该方案是采用了 类 持久化数据来做数据缓存，同时添加了过期时长数据以及参数化。

代码如下：首先定义持久化类,该类可以存储 promise 或者 data 。

class ItemCache() {  
construct(data, timeout) {  
this.data = data  
// 设定超时时间，设定为多少秒  
this.timeout = timeout  
// 创建对象时候的时间，大约设定为数据获得的时间  
this.cacheTime = (new Date()).getTime  
}  
}  

然后我们定义该数据缓存。我们采用Map 基本相同的api 。

class ExpriesCache {  
// 定义静态数据map来作为缓存池  
static cacheMap = new Map()  
// 数据是否超时  
static isOverTime(name) {  
const data = ExpriesCache.cacheMap.get(name)  
// 没有数据 一定超时  
if (!data) return true  
// 获取系统当前时间戳  
const currentTime = (new Date()).getTime()  
// 获取当前时间与存储时间的过去的秒数  
const overTime = (currentTime - data.cacheTime) / 1000  
// 如果过去的秒数大于当前的超时时间，也返回null让其去服务端取数据  
if (Math.abs(overTime) > data.timeout) {  
// 此代码可以没有，不会出现问题，但是如果有此代码，再次进入该方法就可以减少判断。  
ExpriesCache.cacheMap.delete(name)  
return true  
}  
// 不超时  
return false  
}  
// 当前data在 cache 中是否超时  
static has(name) {  
return !ExpriesCache.isOverTime(name)  
}  
// 删除 cache 中的 data  
static delete(name) {  
return ExpriesCache.cacheMap.delete(name)  
}  
// 获取  
static get(name) {  
const isDataOverTiem = ExpriesCache.isOverTime(name)  
//如果 数据超时，返回null，但是没有超时，返回数据，而不是 ItemCache 对象  
return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data  
}  
// 默认存储20分钟  
static set(name, data, timeout = 1200) {  
// 设置 itemCache  
const itemCache = mew ItemCache(data, timeout)  
//缓存  
ExpriesCache.cacheMap.set(name, itemCache)  
}  
}  

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!