Anglejs 캐시에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-03-19 14:22:241372검색
이번에는 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中文网其它相关文章！
推荐阅读：
위 내용은 Anglejs 캐시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!