我已经构建了一个通过$ http。
返回资源的复杂方法该方法返回一个promise,然后检查我的本地缓存是否存在资源。如果是,它将返回缓存的资源,如果不是,它将发出$ http请求。在缓存资源之后这很好用,但是我在加载时触及此方法的应用程序中有多个函数,并且每个函数都会发出http请求,因为资源尚未返回并缓存。 / p>
我想出了一个简单的检查来解决这个问题,但我觉得应该有一个更好的方法。我添加了一个布尔值,如果方法正在获取资源,则设置为true,如果是,我使用半秒超时解析方法,以给予请求时间解决。代码如下。
那么,有更好的方法吗?
var schools = [];
var loadingSchools = false;
function getAllSchools(forceUpdate) {
return $q(function (resolve, reject) {
if(loadingSchools) resolve($timeout(getAllSchools, 500));
else{
loadingSchools = true;
if (schools.length && !forceUpdate) {
loadingSchools = false;
resolve(schools);
return;
}
console.log('$http: Getting All Schools - schoolService.js');
$http.get(API_PATH + 'schools_GetAll', {cache:true})
.success(function(result) {
schools = result;
loadingSchools = false;
resolve(schools);
})
.error(function(error) {
schools = [];
loadingSchools = false;
reject(error);
});
}
});
}
答案 0 :(得分:23)
首先,我认为有必要将HttpPromise
包装到另一个承诺中。使用success/error
方法deprecated,您应该完全依赖then()
方法,并将HttpPromise
视为常规承诺。
为了确保请求只发送一次,您实际上可以跟踪您创建的第一个HttpPromise
,并在随后的函数调用中返回相同的承诺。
这是一个接受API端点作为参数的服务,并确保只向该API发送一个请求。
app.factory('$httpOnce', [ '$http', '$cacheFactory',
function ($http, $cacheFactory) {
var cache = $cacheFactory('$httpOnce');
return function $httpOnce(url, options) {
return cache.get(url) || cache.put(url, $http.get(url, options)
.then(function (response) {
return response.data;
}));
};
}
]);
<强>用法强>
function log(data) {
console.log(data);
}
// issues an HTTP request
$httpOnce('https://api.github.com/').then(log);
// does not issue an HTTP request, returns the same promise as above
$httpOnce('https://api.github.com/').then(log);
// ...
// HTTP request completes somewhere, both promises above are resolved
// ...
setTimeout(function () {
// immediately resolved
$httpOnce('https://api.github.com/').then(log);
}, 5000);
这是demo。您可以在开发工具中看到只发出一个请求。
答案 1 :(得分:0)
我只是完全相同的问题,这是我的服务
app = angular.module('MM_Graph')
class Team_Data
constructor: ($routeParams,$rootScope, $cacheFactory, $q, API)->
@.$routeParams = $routeParams
@.$rootScope = $rootScope
@.$cacheFactory = $cacheFactory
@.cache = $cacheFactory('team_Data')
@.$q = $q
@.deferred = null
@.API = API
@.project = null
@.data = null
@.team = null
@.schema = null
call_With_Cache: (method, params, callback)=> # method that uses promises to prevent multiple parallel calls
cache_Key = "#{method}_#{JSON.stringify(params)}" # create cache key using method and params
if not @.cache.get cache_Key # if this is the first require for this type of data (method_project_team)
deferred = @.$q.defer() # create a new instance of deferred
@.cache.put cache_Key, deferred.promise # put its promise in the cache
on_Data_Received = (data)-> # simple callback method to resolve the promise
deferred.resolve(data) # resolve promise (this is the data that will show as the 1st param in 'then')
method_Params = params.concat(on_Data_Received) # append on_Data_Received callback method to the current 'method' params list
@.API[method].apply(null, method_Params) # invoke 'method' in @.API
@.cache.get(cache_Key).then (data)-> # invoke the 'then' from the promise (will happen async until data is recevied)
callback (data) # finally call the original callback with the data received from 'method'
clear_Data: ()=>
@.cache.removeAll()
@.scores = null
@.schema = null
@.data = null
@.deferred = null
load_Data: (callback)=>
if not (@.$routeParams.project and @.$routeParams.team) # check that project and team are set
return callback()
if (@.$routeParams.project is @.project and @.$routeParams.team is @.team) # check if either the project or team have changed
# do nothing here since project or team have not changed
else
@.clear_Data() # when project changes remove all cache entries
@.project = @.$routeParams.project
@.team = @.$routeParams.team
@.project_Schema (schema)=> # get projecg schema
@.data_Score (scores)=> # get current team scores
@.team_Get (data)=> # get team data
@.scores = scores
@.schema = schema
@.data = data
@.deferred.resolve() # trigger promise resolve
@.deferred ?= @.$q.defer() # ensure @.deferred object exits
@.deferred.promise.then -> # schedule execution
callback() # invoke original caller callback
data_Score : ( callback) => @.call_With_Cache 'data_Score' , [@.project, @.team ], callback
project_Schema: ( callback) => @.call_With_Cache 'project_Schema' , [@.project ], callback
radar_Fields : ( callback) => @.call_With_Cache 'data_Radar_Fields', [@.project ], callback
radar_Team : (target_Team, callback) => @.call_With_Cache 'data_Radar_Team' , [@.project, target_Team ], callback
team_Get : ( callback) => @.call_With_Cache 'team_Get' , [@.project, @.team ], callback
save: (callback)=>
@.API.file_Save @.project, @.team , @.data, callback
app.service 'team_Data', ($routeParams, $rootScope, $cacheFactory, $q, API)=>
return new Team_Data $routeParams, $rootScope, $cacheFactory, $q, API