AngularJs 服务器请求队列或函数未调用

Question

我已经在我的控制器中订阅了套接字事件。当某些事件发生时，我需要从服务器获取一些数据（我尝试将 lb.get() 作为函数调用到某个工厂中）。

$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;
        }

想象一下，我有 5 个套接字事件，但是函数 lb.get() 调用了 4（或 3）次而不是 5 次。您可以在控制台中看到调用的结果：

如您所见，函数 lb.get() 被调用了 4 次而不是 5 次。

我想，我需要类似请求队列的东西。

Answer 1

您没有 handle 错误响应方法 get。也许在这种情况下，你的反应消失了。

您不需要请求队列。

参见 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 to "{{raiseValue}}"
        </button>
      </form>
    </div>
  </div>
</body>

AngularJs 服务器请求队列或函数未调用

AngularJs server request queue or function is not call

xmlhttprequest

angularjs

angular-promise