AngularJS How to prevent duplicate HTTP requests?

Question

I am struggling over the past day with some strange situation. What happens is that duplicate requests are sometimes sent for an API HTTP request on a remote server. Can someone provide help on how to avoid these duplicate requests?

Here is an example of the function I use in the factory:

factory.getAllConsultedClientsLogs = function(oParams) { var deferred = $q.defer(); $http.post('url/to/api', oParams) .success(function(response) { deferred.resolve(response); }) .error(function() { deferred.reject("Error! @factory.getAllConsultedClientsLogs"); }); return deferred.promise; }; 

... and an example of a function using the above on the controller:

 $scope.openConsultedClientsLogsModal = function(operator, date) { if (angular.isDefined(operator) && angular.isDefined(date)) { RrAuditingFactory.getAllConsultedClientsLogs({'operator':operator,'date':date}).then(function(promise) { if (angular.isObject(promise) && angular.isDefined(promise.error) && promise.error == 0) { var modalInstance = $modal.open({ templateUrl: 'path/partial', controller: function($scope, $modalInstance, logsResult) { $scope.logsResult = logsResult; }, resolve: { logsResult: function() { return promise.result; } } }); modalInstance.result.then(function() { }, function () { }); } else { ErrorContext.setError(promise.errorMsg); } }, function(promise) { ErrorContext.setError(promise); }); } else { ErrorContext.setError(); } }; 

Thanks in advance. Hope someone can help me ...

Answer 1

I saw your link:

  $scope.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { $('td:eq(4)', nRow).bind('click', function() { $scope.$apply(function() { $scope.openConsultedClientsLogsModal(aData.Operator, aData.LogDate); }); }); return nRow; }; 

You can untie before binding, this way you prevent duplication. Try it like this:

  $scope.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { //add this unbind to your code $('td:eq(4)', nRow).unbind("click"); $('td:eq(4)', nRow).bind('click', function() { $scope.$apply(function() { $scope.openConsultedClientsLogsModal(aData.Operator, aData.LogDate); }); }); return nRow; }; 

Hope this helps.

Answer 2

I ran into this problem and you can solve it like this:

check if you declared ng-controller twice, you need to declare it only once check if you declared data-ng-click, if so, you need to replace it with ng-click that it

Answer 3

I want to return an object from factory, so in your case, I would do something like:

 module.factory('clientsLogs', function($q, $http) { return { getAllConsulted: function(oParams) { var deferred = $q.defer(); $http.post('url/to/api', oParams) .then(function(response) { deferred.resolve(response); }, function() { deferred.reject("Error! @factory.getAllConsultedClientsLogs"); }); return deferred.promise; } } }); 

and then in your controller something like:

 module.controller('MyCtrl', function($scope, clientsLogs) { clientLogs.getAllConsulted({}).then(function(){...}) } 

It may not help you, but I have never had problems with duplicate calls making it this way.