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 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
json 定义
2008/06/10 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python3字符串操作总结
2019/07/24 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
户外活动总结范文
2014/04/30 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
妈妈活动方案
2014/08/15 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技