在Angular中阻止多个$ http请求。有没有更好的办法?
2023-05-14 13:38
首先,我认为没有必要将其包装HttpPromise
到另一个承诺中。在不赞成使用success/error
方法的情况下,您应该仅依靠该方法,并将当作常规承诺。then()``HttpPromise
为了确保只发送一次请求,您实际上可以跟踪HttpPromise
创建的第一个请求,并在随后的函数调用中返回相同的promise。
这是一项服务,它将接受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);
这是一个演示。您可以在开发工具中看到仅发出一个请求。
我已经构建了一种通过$ http返回资源的复杂方法。
该方法返回一个Promise,然后检查资源是否存在我的本地缓存。如果这样做,它将返回缓存的资源,否则,将发出$
http请求。在资源被缓存后,这种方法效果很好,但是在整个应用程序中,我有多种功能正在按此方法加载,并且每个函数都会发出http请求,因为资源尚未返回和缓存。
我想出了一个简单的检查方法来解决此问题,但我觉得应该有一个更好的方法。我添加了一个布尔值,如果该方法处于获取资源的中间,则将其设置为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);
});
}
});
}