답변:
Angular의 $ http 에는 캐시가 내장되어 있습니다. 문서에 따르면 :
cache – {boolean | Object} – HTTP 응답의 캐싱을 활성화 또는 비활성화하기 위해 $ cacheFactory로 생성 된 부울 값 또는 객체 입니다. 자세한 내용은 $ http 캐싱을 참조하십시오 .
그래서 당신은 설정할 수 있습니다 cache에 사실 의 옵션에서 :
$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 요청 ($ resource가 상속 함)에 대한 기본 캐싱이 가능합니다.
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의 내장 캐싱을 좋아하지만 더 많은 제어를 원하는 경우 라이브러리 angular-cache를 확인하십시오 . 이를 사용하면 수명이 다하고 주기적으로 삭제하고 캐시를 localStorage에 유지하는 옵션을 사용하여 $ http 캐시를 매끄럽게 확장하여 여러 세션에서 사용할 수 있습니다.
또한 캐시는 기본 JSON 문자열이 아닌 POJO와 상호 작용할 수있는보다 동적 인 종류의 데이터 저장소로 캐시를 만들기위한 도구와 패턴을 제공합니다. 해당 옵션의 유틸리티에 대해서는 아직 언급 할 수 없습니다.
그런 다음 관련 라이브러리 앵귤러 데이터 는 $ resource 및 / 또는 Restangular를 대체하는 것으로 angular-cache에 의존합니다.
AngularJS 팩토리는 싱글 톤 이므로 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의 결과를 캐시하여 해당 메소드에 대한 추가 요청에 사용할 수 있습니다.