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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
django框架创建应用操作示例
2019/09/26 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
承认错误的检讨书
2014/01/30 职场文书
就业自我评价
2014/02/04 职场文书
法制报告会主持词
2014/04/02 职场文书
论文答谢词
2015/01/20 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技