前端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)  
}  

（编辑：河北网）

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