HTTP 'Get' 서비스 응답을 AngularJS로 캐시하시겠습니까?

HTTP 'Get' 서비스 응답을 AngularJS로 캐시하시겠습니까?

커스텀 Angular를 작성할 수 있으면 좋겠다.데이터 개체가 비어 있을 때 HTTP '가져오기' 요청을 생성하고 성공 시 데이터 개체를 채우는 JS 서비스입니다.

다음 번에 이 서비스에 콜을 발신할 때 HTTP 요청을 다시 발신하는 오버헤드를 무시하고 캐시된 데이터 개체를 반환합니다.

이게 가능합니까?

Angular의 $http에는 캐시가 내장되어 있습니다.문서에 따르면:

캐시 – {cache|Object}: HTTP 응답 캐시를 활성화 또는 비활성화하기 위해 $cacheFactory를 사용하여 작성된 부울값 또는 객체.자세한 내용은 $http 캐싱을 참조하십시오.

부울값

셋팅할 수 있습니다.cache옵션에서 true:

$http.get(url, { cache: true}).success(...);

또는 콜의 설정 타입을 희망하는 경우는, 다음과 같이 합니다.

$http({ cache: true, url: url, method: 'GET'}).success(...);

캐시 오브젝트

캐시 팩토리를 사용할 수도 있습니다.

var cache = $cacheFactory('myCache');

$http.get(url, { cache: cache })

$cacheFactory를 사용하여 직접 구현할 수 있습니다(특히 $resource를 사용하는 경우).

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });
}

이젠 더 쉬운 방법이 있을 것 같아그러면 모든 $http 요청($리소스가 상속)에 대한 기본 캐시가 활성화됩니다.

 var app = angular.module('myApp',[])
      .config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])

현재의 안정된 버전(1.0.6)에서는, 보다 간단하게 이것을 실행할 수 있습니다.

모듈 설정 후 공장 추가:

var app = angular.module('myApp', []);
// Configure routes and controllers and views associated with them.
app.config(function ($routeProvider) {
    // route setups
});
app.factory('MyCache', function ($cacheFactory) {
    return $cacheFactory('myCache');
});

이것으로, 이것을 컨트롤러에 전달할 수 있습니다.

app.controller('MyController', function ($scope, $http, MyCache) {
    $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) {
        // stuff with results
    });
});

한 가지 단점은 키 이름도 자동으로 설정되기 때문에 삭제가 까다로울 수 있다는 것입니다.그들이 어떤 식으로든 핵심 이름을 얻을 수 있기를 바랍니다.

$http의 내장 캐시를 좋아하지만 더 많은 제어를 원하는 경우 라이브러리 각도 캐시를 확인하십시오.이 기능을 사용하면 존속 가능 시간(Time To Live), 주기적인 삭제 및 세션 전체에서 사용할 수 있도록 localStorage에 캐시를 유지하는 옵션을 통해 $http 캐시를 원활하게 확장할 수 있습니다.

또한 FWIW는 캐시를 기본 JSON 문자열이 아닌 POJO로 상호작용할 수 있는 보다 동적인 종류의 데이터스토어로 만들기 위한 도구와 패턴을 제공합니다.그 옵션의 효용에 대해서는 아직 코멘트할 수 없습니다.

(그리고 관련된 라이브러리 각도 데이터는 $resource 및/또는 Resangular를 대체하는 것으로 각도 캐시에 의존합니다.)

비스듬히JS 팩토리는 싱글톤이기 때문에 http 요청 결과를 저장하고 다음 번에 서비스를 주입할 때 검색할 수 있습니다.

angular.module('myApp', ['ngResource']).factory('myService',
  function($resource) {
    var cache = false;
    return {
      query: function() {
        if(!cache) {
          cache = $resource('http://example.com/api').query();
        }
        return cache;
      }
    };
  }
);

angularBlogServices.factory('BlogPost', ['$resource',
    function($resource) {
        return $resource("./Post/:id", {}, {
            get:    {method: 'GET',    cache: true,  isArray: false},
            save:   {method: 'POST',   cache: false, isArray: false},
            update: {method: 'PUT',    cache: false, isArray: false},
            delete: {method: 'DELETE', cache: false, isArray: false}
        });
    }]);

캐시를 true로 설정합니다.

Angular 8에서는 다음과 같이 할 수 있습니다.

import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}

다음과 같이 말할 수 있습니다.

this.globalDataService.getYourModel().subscribe(yourModel => {


});

위의 코드는 최초 호출 시 원격 API 결과를 캐시하여 해당 메서드에 대한 추가 요청에 사용할 수 있도록 합니다.

언급URL : https://stackoverflow.com/questions/14117653/cache-an-http-get-service-response-in-angularjs