AngularJS How to prevent duplicated http requests?

Question

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...

Aouidane Med Amine · Accepted Answer · 2015-04-21 09:50:34Z

2

i have faced this problem, and you can resolve it like this :

check if you have declared ng-controller twice , you need to declare it just one time check if you have declared data-ng-click , if so , you need to replace it with ng-click that's it

answered Apr 21, 2015 at 9:50

Aouidane Med Amine

1,72118 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KmeCnin Over a year ago

I had the same problem and I saw I used ng-controller AND $routeProvider.when('/route', { controller: 'MyController', ... });

olyv Over a year ago

The same for me: I specified controller name in $routeProvider and in HTML - that is why request doubled

Thor · Accepted Answer · 2014-02-07 17:59:09Z

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 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.

answered Feb 7, 2014 at 17:59

Thor

1201 silver badge7 bronze badges

3 Comments

aqua Over a year ago

Makes sense... I tested with the unbind and it fix my problem. Thank you for your cooperation.

Jijil Kakkadathu Over a year ago

@aqua,Am I missing something in the question? The code snippet in the answer isn't related to the one in question.

aqua Over a year ago

@jijil-kakkadathu I guess you are missing the date this question was posted. It has been almost 5 years now... and it's marked as resolved...

StuR · Accepted Answer · 2014-02-06 15:51:36Z

0

I tend to return an object from a factory, so in your case I'd 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(){...})
}

Might not help you but I've never had any problems with duplicate calls doing it this way.

answered Feb 6, 2014 at 15:51

StuR

12.3k9 gold badges47 silver badges66 bronze badges

2 Comments

aqua Over a year ago

Thank you for your reply. But I'm doing it that way... The thing is that in some cases it duplicates calls. So, I would like to know if anyone could help me on how to prevent duplicated http requests? With a decorator or with a modified http service? Thanks.

KmeCnin Over a year ago

I had the same problem and I saw I used ng-controller AND $routeProvider.when('/route', { controller: 'MyController', ... });

Collectives™ on Stack Overflow

AngularJS How to prevent duplicated http requests?

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related