trigger February 2016

AngularJs server request queue or function is not call

I've subscribed in my controller on socket event. When some event has come, i need to get some data from server (i try to call lb.get() as a function into some factory).

$scope.counter = 0;

$scope.$on('lEvent', function (event, response) { // socket event
                $scope.counter ++;
                console.log('counter '+$scope.counter);

                lb.get(response[0]).then(function(response){
                    var Item = {
                        id: response.id,
                        mime: response.mime,
                        name: response.name,
                    };
                    $scope.items.push(Item);
                    console.log("$scope.items"+$scope.items.length);
                });
    });


// here is a function in my factory 

 get: function(id) {
            deferred = $q.defer();
            $http({
                method: "post",
                url: url,
                data:  $.param({id: id}),
                headers: header
            })
                .success(function (data) {
                    deferred.resolve(data);
                })
                .error(function (data) {
                    deferred.reject(data);
                });
            return deferred.promise;
        }

Imagine, i've got 5 socket events, but function lb.get() has called a 4 (or 3) times instead of 5. You can see the result of calling in console:

enter image description here

As you can see, the function lb.get() was called 4 times instead of 5.

I think, i need something like a request queue.

Answers


Stepan Kasyanenko February 2016

You don't have handle for the error response method get. Maybe in this case, your response is disappear.

You don't need a request queue.

See example on jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleOneController', function($scope, ServiceExample) {
    $scope.counter = 0;
    $scope.successCounter = 0;
    $scope.errorCounter = 0;
    $scope.$on('raise.event', function(event, value) {
      console.log('counter', $scope.counter);
      $scope.counter++;
      ServiceExample.get(value).then(function() {
        console.log('success response:', $scope.successCounter);
        $scope.successCounter++;
      }).catch(function() {
        console.log('error response:', $scope.errorCounter);
        $scope.errorCounter++;
      });
    });
  })
  .controller('ExampleTwoController', function($scope) {
  $scope.raiseValue = "www.google.com"
    $scope.raise = function(val) {
      $scope.$emit('raise.event', val);
    };
  })
  .service('ServiceExample', function($http) {
    return {
      get: function(url) {
        return $http({
          method: "GET",
          url: url
        });
      }
    }
  });
.errors {
  color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm" id="ExampleForm">
    <pre>counter : {{counter}}</pre>
   

Post Status

Asked in February 2016
Viewed 3,817 times
Voted 4
Answered 1 times

Search




Leave an answer