Anglejs 캐시를 작동하는 방법

이번에는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中文网其它相关文章！

推荐阅读：

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

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

위 내용은 Anglejs 캐시를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!