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

【问题标题】：AngularJs server request queue or function is not callAngularJs 服务器请求队列或函数未调用
【发布时间】：2016-05-18 02:02:05
【问题描述】：

我已经在我的控制器中订阅了套接字事件。当某些事件发生时，我需要从服务器获取一些数据（我尝试将 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 次。

我想，我需要一个请求队列之类的东西。

【问题讨论】：

标签： angularjs xmlhttprequest angular-promise

【解决方案1】：

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

您不需要请求队列。

请参阅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>

【讨论】：