Detailed explanation of angularjs cache

This time I will bring you a detailed explanation of angularjs's caching. What are the precautions when using angularjs caching? The following is a practical case, let's take a look.

1. What is a cache

A cache is a component that can store data transparently so that future requests can be served faster.

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

2. Cache in Angular

2.1 Introduction to $cacheFactory

$cacheFactory is a cache that generates cache for all Angular services Object 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. To use the default cache for $http requestsThe 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 uncached request to remind us that incremental changes have occurred, we can use the default $http cache request to clear this request).

 cache = $cacheFactory('$http' 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 its own defined cache instead of the default cache.

4. Set the default cache for $http

It is not convenient to pass it a cache instance every time we want to initiate a $http request, especially is when using the same cache for every request.

其实可以在模块的 .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中文网其它相关文章！

推荐阅读：

知名的网站前端布局分析

在前端中的html基础知识 
vue插件实现移动端轮播图

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