Answers:
cache – {boolean | Object} – 用$ cacheFactory创建的布尔值或对象,用于启用或禁用HTTP响应的缓存。有关更多信息,请参见 $ 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请求($ 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缓存,以便跨会话使用。
FWIW,它还提供了工具和模式,使您的缓存成为一种可以作为POJO进行交互的更具动态性的数据存储,而不仅仅是默认的JSON字符串。尚无法评论该选项的实用程序。
(然后,最重要的是,相关的库angular-data可以替代$ 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的结果,以便可以在对该方法的进一步请求中使用它。