Question

我正在使用AngularJS制作单页应用。我希望不断向服务器发出待处理的http请求，因此只要服务器响应，就发送另一个http请求。我编写了递归函数stateCheck（），但我的代码卡在函数内部，从不返回工厂，也从不更新视图。

如何在我的应用中持续等待这些http请求而不会陷入无限循环？

define([
    'angular',
    'app',
    'angularRoute',
    ], function (angular, app) {
        'use strict';

        app.config(function ( $httpProvider) {        
            /* Angular automatically adds this header to the request,
               preventing us from being able to make requests to the server on another port */
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }).factory('equipmentService', ['$http', '$rootScope', function($http, $rootScope) {
            var factory = {
                getEquipmentState: $http.get($rootScope.backendServer+'/equipment/state'),
                setEquipmentState: function(state){
                    this.equipmentState = state.state;
                    console.log('equipment state', this.equipmentState);
                    redirectState(this.equipmentState);
                }
            }
            var redirectState = function (state) {
                switch(state) {
                    case 'Active':
                        $location.path('/active');
                        break;
                    case 'Review':
                        $location.path('/review');
                        break;
                    default:
                        // don't change views
                }
            }

            function stateCheck () {
                factory.getEquipmentState
                .then(function (data) {
                    factory.setEquipmentState(data.data);
                })
                .then(stateCheck);
            }

            stateCheck();

            return factory;
        }]);
});

Answer 1

问题在于您初始化factory.getEquipmentState的方式。初始化本身已按定义调用/GET请求，因此访问stateCheck()中已解析的承诺会确认第一次调用，但不会确认第一次调用。

要解决此问题，您可以将equipmentService构建为以下内容：

 factory('equipmentService', ['$http', '$rootScope', 
    function($http, $rootScope) {
       var factory = {
          getEquipmentState: function() {
             return this.equipmentState;
          },

          setEquipmentState: function(state){
             this.equipmentState = state.state;
             console.log('equipment state', this.equipmentState);
             redirectState(this.equipmentState);
          }
       };

       var redirectState = function (state) {
          switch(state) {
             case 'Active':
                $location.path('/active');
                break;
             case 'Review':
                $location.path('/review');
             break;
             default:
                // don't change views
          }
       };

       function stateCheck () {
           $http.get($rootScope.backendServer+'/equipment/state')
               .success(function (data) {
                   factory.setEquipmentState(data.data);
               })
               .then(stateCheck);
        }

        stateCheck();

        return factory;
    }])

Answer 2

问题：

您的代码不起作用，因为您始终使用相同的promise对象：

$http.get($rootScope.backendServer+'/equipment/state')已经返回一个承诺，只会解决一次。

解决方案：

仅使用正确的参数保存功能，因此请更改行

getEquipmentState: $http.get($rootScope.backendServer+'/equipment/state'),

到

getEquipmentState: $http.get.bind($http, $rootScope.backendServer+'/equipment/state'),

在stateCheck中调用此函数。这意味着替换

行

factory.getEquipmentState

这一行：

factory.getEquipmentState()

这是working example

递归http请求javascript

2 个答案: