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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
原生JS实现分页
Apr 19 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 xfocus防注入资料
2008/04/27 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
H5图片压缩与上传实例
2017/04/21 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
校本教研活动总结
2014/07/01 职场文书
走群众路线剖析材料
2014/10/09 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
员工自我评价范文
2015/03/11 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL