angularjs 缓存详解

一、什么是缓存

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

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

二、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个请求时,最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护,哪些要移除。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令五

1. vi vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器。 Linux中一般默认安装的的编辑器叫vi,而vim是vi的增强版(vi...

28960
来自专栏逆向技术

32位汇编第三讲,RadAsm,IDE的配置和使用,以及汇编代码注入方式

    32位汇编第三讲,RadAsm,IDE的配置和使用,以及汇编代码注入方式 一丶RadAsm的配置和使用 用了怎么长时间的命令行方式,我们发现了几个问题 ...

57450
来自专栏张戈的专栏

启用WP Super Cache纯代码版本之后的一些优化措施

张戈博客在上个月 28 号启用了 WP Super Cache 代码版,几天下来,虽然小问题不断,但是总体感觉非常不错!不管是前台还是后台,速度都有质的提升,着...

37570
来自专栏北京马哥教育

注意!Python中的10个常见安全漏洞及修复方法

编写安全的代码很困难,当你学习一门编程语言、一个模块或框架时,你会学习其使用方法。在考虑安全性时,你需要考虑如何避免代码被滥用,Python也不例外,即使在标准...

15100
来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(3) -- urllib库的高级用法

1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Hea...

40870
来自专栏aoho求索

基于redis的分布式锁实现

关于分布式锁 很久之前有讲过并发编程中的锁并发编程的锁机制:synchronized和lock。在单进程的系统中,当存在多个线程可以同时改变某个变量时,就需要...

47380
来自专栏全沾开发(huā)

NPM实用指北

NPM实用指北 npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XX...

468100
来自专栏容器云生态

企业网站架构之Nginx+tomcat+memcached集群

nginx+tomcat+memcached应用 系统环境:RHEL6.4  x64   iptables -F   and selinux is disab...

32280
来自专栏嵌入式程序猿

巧用SDK,帮你减少开发时间

已经介绍过很多次NXP的SDK在开发中的应用,但多是基于KV系列和K系列的芯片,最近一个小项目用的是Kinetis KE02系列,该系列已经在SDK中支持,如...

12310
来自专栏云计算教程系列

如何在Debian 9上使用mod_rewrite为Apache重写URL

Apache的mod_rewrite模块允许您以更干净的方式重写URL,将人类可读的路径转换为代码友好的查询字符串。它还允许您根据条件重写URL。

17940

扫码关注云+社区

领取腾讯云代金券