xmlhttprequest - AngularJs server request queue or function is not call -


i've subscribed in controller on socket event. when event has come, need data server (i try call lb.get() function 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 function in 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, function lb.get() has called 4 (or 3) times instead of 5. can see result of calling in console:

enter image description here

as can see, function lb.get() called 4 times instead of 5.

i think, need request queue.

you don't have handle error response method get. maybe in case, response disappear.

you don't need 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>      <pre>successcounter: {{successcounter}}</pre>      <pre class="errors">errorcounter: {{errorcounter}}</pre>      </form>        <div ng-controller="exampletwocontroller">        <h3>        exampletwocontroller      </h3>        <form name="exampleform" id="exampleform">          <input ng-model="raisevalue">          <br>          <button ng-click="raise(raisevalue)" simple>            send request "{{raisevalue}}"          </button>        </form>      </div>    </div>  </body>


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -