How to operate angularjs cache

This time I will show you how to operate the angularjs cache and what are the precautions for operating the angularjs cache. The following is a practical case, let's take a look.

1. What is cache

#A cache is a component that can store data transparently so that it can be served faster in the future ask.

The more requests the cache can serve, the more overall system performance improves.

2. Caching in Angular

2.1 Introduction to $cacheFactory

$cacheFactory is a A service that generates cache objects for all Angular services. Internally, $cacheFactory creates a default cache object, even if we don't explicitly create one.

To create a cache object, you can use $cacheFactory to create a cache with an ID:

var cache = $cacheFactory('myCache');
This $cacheFactory method can accept two Parameters:

cacheId (string): This cacheId is the ID name when creating the cache. It can be referenced using the cache name via the get() method.

capacity: This capacity describes the maximum number of cache key-value pairs to be stored and saved using the cache at any given time.

2.2 Cache Object

The cache object itself has the following methods that can be used to interact with the cache.

info(): The info() method returns the ID, size and options of the cache object.

put(): The put() method allows us to put any key (string) in the form of a JavaScript object value into the cache. cache.put("hello","world");

put() method returns the value we put in the cache.

get(): The get() method allows us to access the cache value corresponding to a key. If the key is found, it returns its value; if not found, it returns undefined . cache.get("hello");

remove(): The remove() function is used to remove a key-value pair from the cache if it is found. If not found, it returns undefined . cache.remove("hello");

removeAll(): The removeAll() function is used to reset the cache and remove all cached values.

destory(): The destory() method is used to remove all references to the specified cache from the $cacheFactory cache registry.

3. Cache in $http

Angular’s ​​$http service creates a cache with the ID $http. Making $http requests use the default cache object is simple: the $http() method allows us to pass it a cache parameter.

3.1 Default $http cache

The default $http cache is particularly useful when the data does not change frequently. You can set it like this:

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

Now, every request via $http to the URL /api/user.json will be stored in the default $http cache. The request key in this $http cache is the complete URL path.

If necessary, you can also operate this default $http cache (for example, if we initiate another request without cache to remind us that incremental changes have occurred, we can clear it in the default $http request this request).

In order to reference the default request of $http, just use the ID to get the cache through $cacheFactory():

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

For the cache under control, we can do all the processing when needed Normal operations, such as retrieving a cached response, clearing the entry from the cache, or eliminating all cached references.

// 获取上一次请求的缓存
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 Custom cache

Sometimes it is possible to have more control over the cache and create rules for cache performance, which requires creating a new cache. Use $http request.

It's easy to make $http requests via a custom cache. Instead of passing a boolean parameter true to the request, you can pass the cache instance.

var myCache = $cacheFactory('myCache');
$http({
　　method: 'GET',
　　utl: '/api/users.json',
　　cache: myCache
});

A small demo: define a cache service, dependency injection into the controller you want to use, directly use

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
        })
      }

Now, $http will use the custom cache instead of the default cache.

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery+fullpage添加界面内的头部与版权

如何使用webpack+vue环境局域网

The above is the detailed content of How to operate angularjs cache. For more information, please follow other related articles on the PHP Chinese website!