Question

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

＆＃13;

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

＆＃13;

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

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

我想，我需要像请求队列这样的东西。

Answer 1

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

您不需要请求队列。

请参阅jsfiddle上的示例。

＆＃13;

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

＆＃13;

.errors {
  color: maroon
}

＆＃13;

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

＆＃13;

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

1 个答案: