Anglejs 캐시에 대한 자세한 설명

이번에는 angularjs캐싱에 대한 자세한 설명과 Angularjs 캐싱 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. 캐시란 무엇인가요?

캐시는 향후 요청을 더 빠르게 처리할 수 있도록 데이터를 투명하게 저장하는 구성 요소입니다.

캐시가 처리할 수 있는 요청이 많을수록 전반적인 시스템 성능이 더욱 향상됩니다.

2. Angular의 캐싱

2.1 $cacheFactory 소개

$cacheFactory는 모든 Angular 서비스에 대한 캐시 객체를 생성하는 서비스입니다. 내부적으로 $cacheFactory는 명시적으로 생성하지 않더라도 기본 캐시 객체를 생성합니다.

캐시 개체를 생성하려면 $cacheFactory를 사용하여 다음 ID로 캐시를 생성할 수 있습니다.

var cache = $cacheFactory('myCache');

이 $cacheFactory 메소드는 두 개의 매개변수를 허용할 수 있습니다.

cacheId(String): 이 캐시Id는 캐시 이름. get() 메소드를 통해 캐시 이름을 사용하여 참조할 수 있습니다.

용량: 이 용량은 주어진 시간에 캐시를 사용하여 저장되고 저장될 캐시 키-값 쌍의 최대 수를 나타냅니다.

2.2 캐시 개체

캐시 개체 자체에는 캐시와 상호 작용하는 데 사용할 수 있는 다음과 같은 메서드가 있습니다.
info(): info() 메서드는 캐시 개체의 ID, 크기 및 옵션을 반환합니다.
put(): put() 메서드를 사용하면 JavaScript 개체 키(문자열)를 값 형식으로 캐시에 넣을 수 있습니다. 캐시.put("hello","world");
put() 메서드는 캐시에 넣은 값을 반환합니다.
get(): get() 메서드를 사용하면 키에 해당하는 캐시 값에 액세스할 수 있습니다. 키가 발견되면 해당 값을 반환하고, 발견되지 않으면 정의되지 않은 값을 반환합니다. 캐시.get("hello");
remove() : 제거() 함수는 키-값 쌍이 발견된 경우 캐시에서 제거하는 데 사용됩니다. 찾을 수 없으면 unundefined 를 반환합니다. 캐시.remove("hello");
removeAll(): RemoveAll() 함수는 캐시를 재설정하고 캐시된 모든 값을 제거하는 데 사용됩니다.
destory(): destory() 메서드는 $cacheFactory 캐시 레지스트리에서 지정된 캐시에 대한 모든 참조를 제거하는 데 사용됩니다.

3. $http의 캐시

Angular의 $http 서비스는 $http라는 ID로 캐시를 생성합니다. 기본 캐시객체를 사용하여 $http 요청을 만드는 것은 간단합니다. $http() 메서드를 사용하면 캐시 매개변수를 전달할 수 있습니다.

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 요청에서 이 요청을 지울 수 있습니다).

 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 사용자 정의 캐싱

때로는 캐시를 더 잘 제어하고 캐시 성능에 대한 규칙을 만드는 것이 가능합니다. 이를 위해서는 $http 요청을 사용하기 위해 새 캐시를 만들어야 합니다.

사용자 정의 캐시를 통해 $http 요청을 만드는 것은 쉽습니다. 요청에 true 부울 매개변수를 전달하는 대신 캐시 인스턴스를 전달할 수 있습니다.

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

작은 데모: 캐시 서비스를 정의하고, 사용하려는 컨트롤러에 종속성 주입을 적용하고,

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는 기본 캐시 대신 사용자 정의 캐시를 사용합니다.

4. $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中文网其它相关文章！

推荐阅读：

知名的网站前端布局分析

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

위 내용은 Anglejs 캐시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!