javascript - AngularJS 使用 http 进行 Promise 处理

Question

这是我正在努力解决的一段代码 - 我有一个 Controller (zmApp.MonitorCtrl)，它正在使用 HTTP 请求调用工厂 (ZMFactory)。

我面临的问题是:a)当 Controller 调用 ZMFactory.getMonitors() 时，它返回 undef 并且出现错误错误:错误:未定义不是对象(正在评估“ZMFactory.getMonitors().then”)

b) 出现这个错误后，工厂中的http请求被处理

我有点困惑。您能检查一下工厂是否已正确设置以返回 promise 吗？

var app = angular.module('zmApp.controllers');

app.controller('zmApp.MonitorCtrl',  function($ionicPlatform, $scope,$http,ZMFactory)
{
            
            $scope.monitors=[];
            console.log("***CALLING FACTORY");
            ZMFactory.getMonitors().then(function(data)
            {
               $scope.monitors = data;
               console.log ("I GOT " +$scope.monitors);
            });
               
});



app.factory('ZMFactory',['$http', '$rootScope',function($http,$rootScope)
{
    //var factory = {};
    var monitors =[];
    return {
        getMonitors: function()
        {
            console.log("***MAKING REQUEST");
            $http({
                    url:'http://myurl.com:9999/zm/index.php?skin=xml',
                    method:'post',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded',
                               'Accept': '*/*',
                               },
                        transformRequest: function(obj) {
                               var str = [];
                               for(var p in obj)
                               str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                               var foo= str.join("&");
                               console.log ("****RETURNING "+foo);
                               return foo;
                        },
                        transformResponse: function(data)
                        {
                            var x2js = new X2JS();
                            var json = x2js.xml_str2json(data);
                            console.log ("***Transmogrifying XML to JSON");
                            return json;
                        },
                        data: {username:'xxx',
                               password:'xxxx',
                               action:'login',
                               view:'console'}
                               
                      }) //http
                      .success (function(data)
                      {
                          console.log("****YAY"+JSON.stringify(data));
                                   
                          var subobj =data.ZM_XML.MONITOR_LIST.MONITOR;
                          var len = subobj.length;
                          for (var i =0; i< len; i++)
                          {
                           console.log ("HERE " + subobj[i].NAME);
                           monitors.push(subobj[i]);
                           }
                          // $rootScope.$broadcast ('handleZoneMinderMonitorsUpdate',monitors);
                           return monitors;
                        }) //success
                        .error(function(data, status, headers, config)
                        {
                           console.log("***OOPS "+status + " H: "+data);
                           return monitors;
                        });

        } //getMonitors
    };//return
    console.log ("**** NEVER *****");
                        
}]);

Answer 1

答案的关键在于您自己问题的措辞:

Can you please check if the factory has been set up correctly to return a promise

您需要归还它。现在，您的 getMonitors 函数(如果我删除与问题无关的所有代码)如下:

getMonitors: function(){
  $http({})
    .success(function(data){
       // convert data to monitors
       return monitors;
    });
}

这是一个不返回任何内容的函数调用，或者更确切地说，返回未定义。 Promise 没有“魔力”——它就像任何其他对象一样——您需要将其返回给调用者。

因此，您需要做两件事:

1) 从 .success 更改为 .then。 .then 生成一个新的链式 Promise，在返回时将 monitor 传递给消费者(您在 .then 处理程序中返回) 。另一方面，.success 返回原始 Promise(由 $http 生成)，并且从 .success 返回的数据丢失。

2) 实际上返回 $http 调用(或者更确切地说，$http().then() 调用)

从概念上讲，这是这样的:

app.factory('ZMService', function ZMServiceFactory($http){
    return {
        // getMonitors function of the ZMService service
        getMonitors: function(){
          return $http({})
            .then(function(response){
               var data = response.data;
               // convert data to monitors
               return monitors;
            });
        }
    };
});

(另外，请注意我如何将您的服务从 ZMFactory 重命名为 ZMService。名称中的“工厂”用词不当。工厂是生成实例 - 因此是“工厂” - 但实例本身是一个对象，在 Angular 中称为“服务”)