edgaraafelix edgaraafelix - 5 months ago 388
AngularJS Question

AngularJS How to prevent duplicated http requests?

I'm struggling for the past day with some weird situation.
What's happening is that for an http request to an API on a remote server occasionally duplicate requests are being sent.
Can anyone please provide help on how to avoid these duplicated requests?

Here is an example of a function that I use on a 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 indicated on a 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();

}

};


Thank you in advance.. hope that anyone could help me out...

Answer

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 unbind before doing the bind, this way you will prevent duplicates. Try 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;
    };

I hope this helps.