Anglejs 캐시를 작동하는 방법
- php中世界最好的语言원래의
- 2018-06-15 15:00:471480검색
이번에는Angularjs캐시를 어떻게 운용하는지, 그리고Angularjs캐시 운용시 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례로 살펴보도록 하겠습니다.
1. 캐시란 무엇입니까
캐시는 향후 요청을 더 빠르게 처리할 수 있도록 데이터를 투명하게 저장하는 구성 요소입니다.
캐시가 처리할 수 있는 요청이 많을수록 전반적인 시스템 성능이 더욱 향상됩니다.
2. Angular에서의 캐싱
2.1 $cacheFactory 소개
$cacheFactory는 모든 Angular 서비스에 대한 캐시 객체를 생성하는 서비스입니다. 내부적으로 $cacheFactory는 명시적으로 생성하지 않더라도 기본 캐시 객체를 생성합니다.
캐시 객체를 생성하려면 $cacheFactory를 사용하여 ID가 있는 캐시를 생성할 수 있습니다.
var 캐시 = $cacheFactory('myCache')
이 $cacheFactory 메소드는 2개의 매개변수를 허용합니다:
cacheId(문자열) : 이 캐시Id는 캐시를 생성할 때 사용하는 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 요청에서 이 요청을 지울 수 있습니다).
$http의 기본 요청을 참조하려면 다음 ID를 사용하여 $cacheFactory()를 통해 캐시를 가져옵니다.
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);
}
);
}
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!