详解前端API请求缓存方案

此时数据类以及操作类 都已经定义好,我们可以在api层这样定义 。

// 生成key值错误  
const generateKeyError = new Error("Can't generate key from name and argument")  
// 生成key值  
function generateKey(name, argument) {  
// 从arguments 中取得数据然后变为数组  
const params = Array.from(argument).join(',')  
try{  
// 返回 字符串，函数名 + 函数参数  
return `${name}:${params}`  
}catch(_) {  
// 返回生成key错误  
return generateKeyError  
}  
}  
async getWare(params1, params2) {  
// 生成key  
const key = generateKey('getWare', [params1, params2])  
// 获得数据  
let data = ExpriesCache.get(key)  
if (!data) {  
const res = await request('/getWares', {params1, params2})  
// 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求  
ExpriesCache.set(key, res, 10)  
}  
return data  
}  

该方案使用了 过期时间 和 api 参数不同而进行 缓存的方式。已经可以满足绝大部分的业务场景。

调用方式：

getWares(1,2).then( ... )  
// 第二次调用 取得先前的promise  
getWares(1,2).then( ... )  
// 不同的参数，不取先前promise  
getWares(1,3).then( ... )  

方案五 基于修饰器的方案四

和方案四是的解法一致的，但是是基于修饰器来做。代码如下：

// 生成key值错误  
const generateKeyError = new Error("Can't generate key from name and argument")  
// 生成key值  
function generateKey(name, argument) {  
// 从arguments 中取得数据然后变为数组  
const params = Array.from(argument).join(',')  
try{  
// 返回 字符串  
return `${name}:${params}`  
}catch(_) {  
return generateKeyError  
}  
}  
function decorate(handleDescription, entryArgs) {  
// 判断 当前 最后数据是否是descriptor，如果是descriptor,直接 使用  
// 例如 log 这样的修饰器  
if (isDescriptor(entryArgs[entryArgs.length - 1])) {  
return handleDescription(...entryArgs, [])  
} else {  
// 如果不是  
// 例如 add(1) plus(20) 这样的修饰器  
return function() {  
return handleDescription(...Array.protptype.slice.call(arguments), entryArgs)  
}  
}  
}  
function handleApiCache(target, name, descriptor, ...config) {  
// 拿到函数体并保存  
const fn = descriptor.value  
// 修改函数体  
descriptor.value = function () {  
const key = generateKey(name, arguments)  
// key无法生成，直接请求 服务端数据  
if (key === generateKeyError) {  
// 利用刚才保存的函数体进行请求  
return fn.apply(null, arguments)  
}  
let promise = ExpriesCache.get(key)  
if (!promise) {  
// 设定promise  
promise = fn.apply(null, arguments).catch(error => {  
// 在请求回来后，如果出现问题，把promise从cache中删除  
ExpriesCache.delete(key)  
// 返回错误  
return Promise.reject(error)  
})  
// 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求  
ExpriesCache.set(key, promise, config[0])  
}  
return promise  
}  
return descriptor;  
}  
// 制定 修饰器  
function ApiCache(...args) {  
return decorate(handleApiCache, args)  
}  

（编辑：核心网）

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