angularjs 缓存的使用详解


Posted in Javascript onMarch 19, 2018

一、什么是缓存

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。

缓存能够服务的请求越多,整体系统性能就提升得越多。

二、Angular 中的缓存

2.1 $cacheFactory 简介

$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部, $cacheFactory 会创建一个默认的缓存对象,即使我们并没有显示地创建。

要创建一个缓存对象,可以使用 $cacheFactory 通过一个ID创建一个缓存:

var cache = $cacheFactory('myCache');
这个 $cacheFactory 方法可以接受两个参数:

cacheId (字符串):这个 cacheId 就是创建缓存时的ID名称。可以通过 get() 方法使用缓存名称来引用它。

capacity :这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

2.2 缓存对象

缓存对象自身有下列这些方法可以用来与缓存交互。

info() : info() 方法返回缓存对象的ID、尺寸和选项。

put() : put() 方法允许我们把任意JavaScript对象值形式的键(字符串)放进缓存中。cache.put("hello","world");

put() 方法会返回我们放入缓存中的值。

get() : get() 方法让我们能够访问一个键对应的缓存值。如果找到了这个键,它会返回它的值;如果没有找到,它会返回 undefined 。cache.get("hello");

remove() : remove() 函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到,它就会返回 undefined 。cache.remove("hello");

removeAll() : removeAll() 函数用于重置缓存,同时移除所有已缓存的值。

destory() : destory() 方法用于从 $cacheFactory 缓存注册表中移除指定缓存的所有引用。

三、$http 中的缓存

Angular的 $http 服务创建了一个带有ID为 $http 的缓存。 要让 $http 请求使用默认的缓存 对象很简单: $http() 方法允许我们给它传递一个 cache 参数。

 3.1 默认的 $http 缓存

当数据不会经常改变时,默认的 $http 缓存就特别有用了。可以像这样设置它:

$http({
  method: 'GET',
  url: '/api/users.json',
  cache: true//设置为true只是用来使用$http默认的缓存机制
});

现在,通过 $http 到URL /api/user.json 的每个请求将会存储到默认的 $http 缓存中。 这个$http 缓存中的请求键就是完整的URL路径。

如果需要,也可以操作这个默认的 $http 缓存(比如,如果我们发起的另外一个没有缓存的请求提醒我们发生了增量变化,我们就可以在默认的 $http 请求中清除这个请求)。

为了引用 $http 的默认请求,只需通过 $cacheFactory() 使用ID来获取到该缓存:

var cache = $cacheFactory('$http');

对于所掌控的缓存,我们可以在需要时进行所有的正常操作,比如检索已缓存的响应,从缓存中清除条目,或者消除所有缓存的引用。

// 获取上一次请求的缓存
var usersCache = cache.get('http://example.com/api.users.json');
// 删除上一次请求的缓存入口
cache.remove('http://example.com/api.users.json');
// 重新开始并移除全部缓存
cache.removeAll();
var cache = $cacheFactory.get('$http');
    if(cache.get('cacheData')){
      console.log(cache.get('cacheData'));
    }else{
      helloService.play().then(
        function (data) {
          cache.put("cacheData", data);//往缓存中放入数据
          console.log(data);
        }
      );
    }

3.2 自定义缓存

有时候能够对缓存有更多的控制以及针对缓存的表现创建规则,这就需要创建一个新的缓存来使用 $http 请求。

通过自定义的缓存来让 $http 请求发起请求很简单。可以采用传递缓存实例的方式,而不必传递一个布尔参数 true 给请求。

var myCache = $cacheFactory('myCache');
$http({
method: 'GET',

utl: '/api/users.json',

cache: myCache
});

一个小demo:定义一个缓存服务,依赖注入到你要用的控制器中,直接使用

define([
  'angularModule'
],function(app){
  app.factory('myCache', ['$cacheFactory', function($cacheFactory){
    return $cacheFactory('myCache'); //自定义一个缓存服务
  }])
});
//自定义缓存,有缓存就从缓存里取,否则就发送请求
    if(myCache.get('cacheData')){
      console.log(myCache.get('cacheData'));
    }else{
      helloService.play(myCache).then(
        function (data) {
          myCache.put("cacheData", data);
          console.log(data);
        }
      );
    }
      cache:只是为了可以使用默认$http的缓存机制
      play : function (myCache) {
        return httpRequestService.request({
          method : 'get',
          url : 'http://localhost:8080/hello/play',
          cache : myCache
        })
      }

现在, $http 将会使用自定义的缓存而非默认缓存。

四、为 $http 设置默认缓存

每次我们想要发起一个 $http 请求时都要给它传递一个缓存实例并不方便,特别是对每个请求使用同一缓存的时候。

其实可以在模块的 .config() 方法中通过 $httpProvider 设置 $http 默认使用的缓存对象。

angular.module('myApp', []).config(function($httpProvider) {
$httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});
});

这个 $http 服务不再使用它为我们创建的默认缓存;它会使用我们自定义的缓存,实际上这就是一个近期缓存最久未使用算法① (Least Recently Used,LRU)。

LRU缓存根据缓存容量只保留最新的缓存数目。也就是说,我们的缓存容量为20,因此会缓存前20个请求,但是进入第21个请求时,最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护,哪些要移除。

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

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
学习js所必须要知道的一些
Mar 07 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 #Javascript
react-native-video实现视频全屏播放的方法
Mar 19 #Javascript
vue实现树形菜单效果
Mar 19 #Javascript
VUE重点问题总结
Mar 19 #Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
You might like
php实现用户在线时间统计详解
2011/10/08 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
javascript读取xml
2006/11/04 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
keras 权重保存和权重载入方式
2020/05/21 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
项目开发计划书
2014/01/09 职场文书
应聘面试自我评价
2014/01/24 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python