[英]how to prevent duplicated $http requests in AngularJS app?
I need to prevent sending the same request repeatedly to API before the previous request will give the response. 我需要阻止在上一个请求给出响应之前重复向API发送相同的请求。 I have found out some solutions.
我找到了一些解决方案。 But, I don't want to disable the button while waiting for response because I have more API calls in my app.
但是,我不想在等待响应时禁用该按钮,因为我的应用程序中有更多的API调用。
I really need to do something in my $provider .config() .I found a way here( http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs ). 我真的需要在我的$ provider .config()中做一些事情。我在这里找到了一种方法( http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs )。
But I need more clarification code. 但我需要更多的澄清代码。 Any kind of reference about this is welcome.
任何关于此的参考都是受欢迎的。
Lets say you have $http
in your controller.js
file. 假设你的
controller.js
文件中有$http
。
Many request to server 许多人要求服务器
$http.get('/link/to/file.php');
Just one request to server, no matter how many times you will call this method: 只需向服务器发出一个请求,无论您多少次调用此方法:
$http.get('/link/to/file.php', {cache: true});
Example: 例:
(function() {
'use strict';
angular
.module('yourModuleName')
.controller('DashboardCtrl', DashboardCtrl);
DashboardCtrl.$inject = ['$scope'];
function DashboardCtrl($scope) {
$scope.get = function () {
$http.get('/link/to/file.php', {cache: true}).then(function(response) {
// it will do GET request just once
// later you will get the same response from cacheFactory
})
}
}
}());
I would like to complement @VikasChauhan answer, however I do not have enough reputation to comment on his answer. 我想补充@VikasChauhan的答案,但我没有足够的声誉评论他的答案。
His code works great for me, except the part where he returns null. 他的代码对我很有用,除了他返回null的部分。 That causes Angular to throw a bunch of errors all over.
这导致Angular全面抛出一堆错误。
Instead of null, I simply reject the request: 我只是拒绝请求,而不是null:
return $q.reject(request);
Here's my function: 这是我的功能:
$httpProvider.interceptors.push(['$injector', '$q', function interceptors($injector, $q) {
return {
// preventing duplicate requests
request: function request(config) {
var $http = $injector.get('$http');
var _config = angular.copy(config);
delete _config.headers;
function isConfigEqual(pendingRequestConfig) {
var _pendingRequestConfig = angular.copy(pendingRequestConfig);
delete _pendingRequestConfig.headers;
return angular.equals(_config, _pendingRequestConfig);
}
if ($http.pendingRequests.some(isConfigEqual)) {
return $q.reject(request);
}
return config;
}
};
}
]);
Hope this helps other people. 希望这有助于其他人。
You can create a function to cancel the first http request, when calling the another one on the button click. 您可以创建一个函数来取消第一个http请求,在单击按钮时调用另一个http请求。 Here is a reference that uses $q.defer() function that helped me on a similar issue: http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx
这是一个使用$ q.defer()函数的参考,它帮助我解决了类似的问题: http ://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs 的.aspx
In my project, i was facing this problem. 在我的项目中,我遇到了这个问题。 I found a very useful working solution here
我在这里找到了一个非常有用的工作方案
And implemented it inside the config: 并在配置中实现它:
function config($routeProvider, $httpProvider) {
$httpProvider.interceptors.push(['$injector', function interceptors($injector) {
// Manually injecting dependencies to avoid circular dependency problem
return {
// preventing duplicate requests
'request': function request(config) {
var $http = $injector.get('$http'),
copiedConfig = angular.copy(config);
delete copiedConfig.headers;
function configsAreEqual(pendingRequestConfig) {
var copiedPendingRequestConfig = angular.copy(pendingRequestConfig);
delete copiedPendingRequestConfig.headers;
return angular.equals(copiedConfig, copiedPendingRequestConfig);
}
if ($http.pendingRequests.some(configsAreEqual)) {
debugger;
return null;
}
return config;
}
}
}
]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.