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])方法实现，目前有两个配置项：

{
	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：一款好用的Ajax缓存插件/

不甘平庸的你，快来跟我一起充电吧，关注看风景，获取更多精彩内容。