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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript Archive Network 集合
May 12 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
javascript实现下雨效果
Mar 27 Javascript
bootstrap表单示例代码分享
May 18 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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中的cookie
2006/11/26 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php类常量用法实例分析
2015/07/09 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python关于调用函数外的变量实例
2019/12/26 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
打架检讨书100字
2014/01/08 职场文书
工商管理专业自荐信
2014/06/03 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
单位工作证明
2014/10/07 职场文书
教师批评与自我批评
2014/10/15 职场文书
会计工作总结范文2014
2014/12/23 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
超市员工管理制度
2015/08/06 职场文书