深入解析Angularjs 缓存的使用

这次给大家带来angularjs的缓存详解，使用angularjs缓存的注意事项有哪些，下面就是实战案例，一起来看一下。

##一、什么是缓存

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

##二、Angular 中的缓存

2.1 $cacheFactory 简介

cacheFactory 会创建一个默认的缓存对象，即使我们并没有显示地创建。 要创建一个缓存对象，可以使用 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 的缓存。 要让 http() 方法允许我们给它传递一个 cache 参数。

3.1 默认的 $http 缓存

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

  method: 'GET',
  url: '/api/users.json',
  cache: true  //设置为true只是用来使用$http默认的缓存机制
});//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
复制代码

现在，通过 http 缓存中。 这个$http 缓存中的请求键就是完整的URL路径。

如果需要，也可以操作这个默认的 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);
    }//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  );//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
复制代码

3.2 自定义缓存

有时候能够对缓存有更多的控制以及针对缓存的表现创建规则，这就需要创建一个新的缓存来使用 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'); //自定义一个缓存服务
  }])
});//欢迎加入前端全栈开发交流圈一起学习交流：864305860
复制代码

自定义缓存,有缓存就从缓存里取，否则就发送请求

if(myCache.get('cacheData')){
  console.log(myCache.get('cacheData'));
}else{
  helloService.play(myCache).then(
    function (data) {
      myCache.put("cacheData", data);
      console.log(data);
    }//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  );//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
  cache:只是为了可以使用默认$http的缓存机制
  play : function (myCache) {
    return httpRequestService.request({
      method : 'get',
      url : 'http://localhost:8080/hello/play',
      cache : myCache
    })
  }/欢迎加入前端全栈开发交流圈一起学习交流：864305860
复制代码

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

感谢您的观看，如有不足之处，欢迎批评指正。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5c024d49e51d45776a2f7f41