angularjs 缓存详解

时间: 2018-03-19阅读: 1231标签: 缓存

一、什么是缓存

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

 

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/516

关闭

vue开发之keep-alive

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。

浏览器的缓存策略

已开始生产的项目,用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新,客户端也没有必要每次都去服务器端拉取数据,占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以nginx配置为例

如何获取最新版的js文件,解决被浏览器缓存的问题

假设有一个js文件(以jquery为例),在服务器上的URL地址为:../js/jquery.js 。当某天jquery版本更新了,用最新版的jquery文件覆盖了原来旧版的jquery文件。这时,在打开引用了此js文件的网页时,有可能引用的还是旧版

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

清除浏览器缓存的方法

怎么清除浏览器缓存,比如每次进入页面后先清理上次浏览器缓存的html,css,js ? 直接在html页面的head标签中添加,当然这个需要浏览器支持, 不想缓存静态文件,

给url加时间戳,骗过浏览器缓存

修改js的时候总是因为浏览器不刷新缓存,导致修改无效。URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存

Apache网页优化之压缩与缓存

在企业中,部署Apache后只采用默认的配置参数,会引发网站很多问题,换言之默认配置是针对以前较低的服务器配置的,以前的配置已经不适用当今互联网时代为了适应企业需求,就需要考虑如何提升Apache的性能与稳定性

<keep-alive> 缓存及其缓存优化原理

由于缓存空间是有限的,所以不能无限制的进行数据存储,当存储容量达到一个阀值时,就会造成内存溢出,因此在进行数据缓存时,就要根据情况对缓存进行优化,清除一些可能不会再用到的数据。所以根据缓存淘汰的机制不同,常用的有以下三种:

localstorage实现带过期时间的缓存功能

一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求。cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效的,即使重启浏览器。

缓存常见问题及解决方案

使用缓存可以缓解大流量压力,显著提高程序的性能。我们在使用缓存系统时,尤其是大并发情况下,经常会遇到一些“疑难杂症”。本文总结了一些使用缓存时常见的问题及解决方案,以后在遇到这类问题时可以作为参考

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!