代码拉取完成,页面将自动刷新
用于浏览器端的轻量级缓存接口,可为所有getter赋予缓存能力,能够显著改善远程数据的响应速度并大幅提升用户体验
基于B/S结构的web应用有大量需要远程加载的数据,无论是PC或App或其他平台都会频繁的看到转圈/长条/骨架等各式各样的loading提示。 一旦这些效果反复出现时就会严重影响用户体验。
Cache.js虽然为解决这些问题而设计,但与cache-interface并不相同,它目前还在草案阶段并且具有仅对request/response、仅工作在HTTPS下等限制,而Cache.js可对任何Data-Getter赋能。
持久化使用
localStorage
接口,这限制了可缓存数据总容量。可以点击这里检测不同浏览器的实际限制
npm i @holyhigh/cache.js
/********** 接口文件 **********/
import {cacheable} from '@holyhigh/cache.js'
//1. 接口文件中定义的方法
function getAllUsers(){
return new Promise((res,rej)=>{
setTimeout(()=>res('ok'),1000)
});
}
//2. 扩展缓存能力
let getUsersCache = cacheable(getAllUsers,{key:'all_users'})
//3. 导出接口
export {getUsersCache}
/********** 业务文件 **********/
const users = await getUsersCache()
import Cache,{cacheable} from '@holyhigh/cache.js'
//包装getter并返回包装后的异步函数
//key支持函数或字符串,使用函数可实现同一接口不同参数进行不同缓存;相同key对应的缓存数据会被覆盖;校验器用于检测是否对rs进行缓存,默认 !isNil
const cacheGetter = cacheable(getter:Function, key: ((params: any[]) => string|Promise<string>) | string, options?:{validator?:(rs: any) => boolean}): (...params: any[]) => Promise<any>
//开启持久化,默认false
Cache.persistence = true;
//设置全局缓存key前缀,默认'cache.js_'
Cache.keyPreffix = 'MyCache_'
//设置全局校验器,默认(rs) => !isNil(rs),
Cache.validator = isString
//更新指定key缓存数据
Cache.put(key: string, data: any)
//删除指定key缓存数据
Cache.del(key: string | RegExp)
//检测指定key缓存数据
Cache.has(key: string)
//获取指定key缓存数据
Cache.get(key: string)
//获取所有缓存数据map
Cache.getAll()
//删除所有缓存数据
Cache.delAll()
//cacheable别名
Cache.add
见test/index.spec.ts
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。