假设我的服务从$ resource get返回一个promise,我想知道这是否是缓存数据的正确方法。在此示例中,在点击后退箭头并返回搜索结果后,我不想再次查询Web服务器,因为我已经拥有它们。这是处理这种情况的正确模式吗?以下示例是查询Flixter(烂番茄)Api。
改变代码:
控制器:
function SearchCtrl($scope, $route, $routeParams, $location, DataService) {
DataService.search($routeParams.q).then(function(data){
$scope.movies = data.movies;
});
}
服务
angular.module('myApp.services', []).
factory('DataService', ['$q', '$rootScope', 'JsonService', function ($q, $rootScope, JsonService) {
var movie = {};
var searchResults = {};
var searchq = '';
var service = {
search: function(q) {
var d = $q.defer();
// checking search query, if is the same as the last one,
//resolve the results since we already have them and don't call service
// IS THIS THE CORRECT PATTERN
if (q==searchq) {
d.resolve(searchResults);
} else {
// returns a $resource with defined getdata
JsonService.search.movieSearch(q, 20, 1).getdata(function(data){
searchResults = data;
searchq = q;
d.resolve(searchResults);
});
}
return d.promise;
},
getSearchResults: function() {
return searchResults;
}
};
return service;
}]);
我无法提供一个有效的示例,因为它会公开我的API密钥。
答案 0 :(得分:1)
我已经伪造了实际的ajax请求,但我认为一般的想法应该适用,你可以看到full demo here
这是控制器,它只是执行搜索,然后设置结果:
myApp.controller('MyCtrl', function($scope, DataService) {
$scope.search = function(){
DataService
.search($scope.q)
.then(function(response){
$scope.fromCache = response.fromCache;
$scope.results = response.results;
});
};
});
在DataService中,我只是将结果保存到一个键入查询的对象中。这很简单,但希望能让你开始。你可以把它保存在html5存储器中,或者你想要的东西。
你需要在这里输入你真正的ajax调用,但原则仍然存在。
myApp.factory('DataService', function($q){
var resultsCache = {};
return {
search: function(query){
var deferred = $q.defer();
if (resultsCache[query]) {
resultsCache[query].fromCache = true;
}
else {
resultsCache[query] = {results: [{name: 'result one'}, {name: 'result two'}]};
}
deferred.resolve(resultsCache[query]);
return deferred.promise;
}
};
});
希望有所帮助