AJAX-Cache:一款好用的Ajax缓存插件

AJAX-Cache是什么

Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

AJAX-Cache提供什么

1. 定时缓存

大多数的缓存场景是,希望将某个接口数据在一定时间段内缓存起来,缓存期内不再发起请求直接返回本地数据,过了这段时间再重新获取并更新缓存。

这就是“定时缓存”的典型使用场景,我们可以为$.ajax()方法传入localCache: Number开启定时缓存,Number是缓存秒毫秒数。定时缓存实际上是牺牲了数据实时性换取响应速度,使用中通过设置不同的缓存时长,可以匹配不同的业务场景,比如对于相对稳定的数据可以设置较长的缓存时间,而设置较短的缓存时间则可以起到请求“防抖”作用。

2. 快照缓存

更多的时候我们希望接口能兼具实时性和响应速度,比如应用首屏的异步数据块,既要快又要新,虽然这种需求听起来很“不科学”,但我们确实可以通过“快照缓存”满足这个需求。

$.ajax()方法传入localCache: "snapshot"可以开启快照缓存,此时每当接口成功请求后都会为数据建立一份“快照”,下次请求时接口会首先将最近的快照数据作为结果返回,供前端渲染界面,同时发送请求获取最新数据,新数据到达后会与快照做对比,如果与快照相同则缓存命中,如果与快照不同会更新快照,并将新数据返回,供前端更新界面。也就是说启用快照缓存的接口前端有可能得到两次返回结果,为了让前端能够区分出快照,对象格式的快照数据会自动增加一个snapshot=true的属性。

3. 缓存清理

插件本身会自动清理过期缓存;

对于不想继续使用缓存的接口可以为$.ajax()方法传入localCache: false清理当前接口的缓存并返回最新数据;

也可以调用$.ajaxCache.clear()清理所有AJAX-Cache插件产生的缓存。

4. 并发管理

除了上述基本功能,AJAX-Cache还考虑到了极端情况下的请求并发问题,当某个接口在本地没有缓存或者缓存过期时发生了并发,AJAX-Cache会拦截并发请求,暂存请求回调,只向服务端发送一次请求,待拿到数据后再依次执行暂存的请求回调,从而真正起到减少网络资源占用的作用。

5. 约定优于配置

最后,Ajax-Cache奉行“约定优于配置”的理念,将主要功能都集中到一个localCache配置上,使用简单,将对业务代码的侵入性降到最低,如果没有使用$.ajaxCache全局方法的话,从页面中直接将Ajax-Cache插件移除业务代码也不会报错。

使用简单不代表功能简单,如果需要修改Ajax-Cache的全局配置,也可以通过$.ajaxCache.set(config[Object])方法实现,目前有两个配置项:

1
2
3
4
{
storage: 'localStorage', //存储方式,默认localStorage,可选sessionStorage
cacheNamePrefix: '_ajaxcache' //存储标识,集中清理缓存时的依据,如果与你存储的业务数据发生冲突,可以通过这里修改
}

扩展信息

官网://refined-x.com/AJAX-Cache/
Github:https://github.com/tower1229/AJAX-Cache

前端路上原创技术文章,转载请注明出处:https://refined-x.com/2018/03/07/AJAX-Cache/

对文章内容有任何疑问欢迎留言讨论,或者扫描下方二维码加入“前端路上-知识星球”付费提问。

前端路上-知识星球