AngularJS中的缓存使用


Posted in Javascript onJanuary 11, 2017

缓存篇

一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复,消耗时间。因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多。

$cacheFactory与缓存对象

$cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity。其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量。举个生动的例子,$cacheFactory就是包租婆,她有一栋楼,里面有大大小小的房子可以出租,只要你给够钱,包租婆就会把房子租给你(获得缓存对象),这个房子包括了它的房号(ID)和房间的大小(capacity-容量)。

var myCache = $cacheFactory('myCache');

其中,缓存对象拥有以下几种方法

1. myCache.info() 返回缓存对象的ID,尺寸和选项

2. myCache.put() 新值键值对并放入缓存对象中 myCache.put("name", "Ben")

3. myCache.get() 返回对应的缓存值,若没有找到则返回undefined myCache.get("name")

4. myCache.remove() 把键值对从对应缓存对象中移除 myCache.remove("name")

5. myCache.remvoeAll() 清空该缓存对象

$http中的缓存

$http()方法允许我们传递一个cache参数。当数据不会经常改变的时候,默认的$http缓存会特别有用。其中,默认的$http缓存对象是 var cache = $cacheFactory('$http'); 可以这样设置它

$http({
   method: 'GET',
   url: 'api/user.json',
   cache: true
})

其中,缓存的键值为url, var userCache = cache.get('api/user.json')

自定义缓存

通过自定义的缓存来让$http发起请求也很简单,只需把cache值设为对应缓存对象名称即可

$http({
   method: 'GET',
   url: 'api/user.json',
   cache: myCache
})

或者通过config配置来设置每个$http请求的缓存对象,而不必像上面的例子中,往每一个$http请求中加入配置

app.config(function($httpProvider){
$httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

其中,capacity会使用"近期缓存最久未使用算法",就是说,加如缓存容量为20,现在已经缓存了缓存20个,当第21个想要被缓存的时候,最久最小未被使用的缓存键值对会被清除,以便腾出空间容纳第21个缓存。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP中图片等比缩放的实例
2013/03/24 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
React如何避免重渲染
2018/04/10 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python简单进程锁代码实例
2015/04/27 Python
图解Python变量与赋值
2018/04/03 Python
PyCharm代码格式调整方法
2018/05/23 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
用Python制作音乐海报
2021/01/26 Python
工厂仓管员岗位职责
2014/01/01 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015年教研工作总结
2015/05/23 职场文书
七年级作文之下雨天
2019/12/23 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
详解Python flask的前后端交互
2022/03/31 Python