Angular http returns $$状态对象

Question

我定义了以下工厂：

angular.module("account").factory("users",["$http",
    function(a){
      return {
         getUser: function(){
            return a.get("/user/me").then(function(r){
                return r.data;
            });
        }
    };
  }
]);

我的控制器：

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        a.user = u.getUser();
        console.log(a.user);
}]);

这是console.log：

 d {$$state: Object, then: function, catch: function, finally: function} $$state: Object status: 1 value: Object user: Object__v: 0 _id: "54c1fg29f36e117332000005" temp: "1ce3793175e0b2548fb9918385c2de09"  __proto__: Object __proto__: Object __proto__: Object __proto__: Object

上面的代码是 returning 状态对象而不是用户对象。但是从日志来看，state对象在value范围内有user对象。我如何获得用户对象？还是我这样做完全错了？

我知道另一种方法是 return $http.get 并在控制器中调用 then() 方法。但是我会经常使用用户对象，如果我在控制器中调用 then() 方法，它几乎与在控制器而不是工厂中使用 $http.get 相同。

Answer 1

JavaScript I/O 通常是异步的，包括在这种情况下。您的 getUser 调用 returns $q 承诺。为了打开它，你必须链接到它，然后这样打开它：

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        u.getUser().then(function(user){
            a.user = user;
            console.log(a.user);
        });
}]);

如果您使用路由，您可能还想查看路由中的 resolve 选项。另见 this related question.

Answer 2

angular.module("account").factory("users",["$http",
    function(a){
      var factObj = {
         user: null,
         getUser: function(){
            return a.get("/user/me").then(function(r){
                factObj.user = r.data;
            });
        }
      factObj.getUser();

      return factObj;
    };
  }
]);

angular.module("test.controllers",["account"])
.controller("TestCtrl",["$scope","users",
    function(a,u){
        a.userService = u;
}]);

在您看来

<div ng-controller="TestCtrl as test">{{test.userService.user}}</div>

根据评论进行编辑，是的，这不适用于您可能拥有的控制器或视图，但这种模式效果很好，并且无需在每个可能重复使用数据的控制器中使用 .then。

通常将您的模型存储在处理获取数据的工厂或服务中，可以更轻松地将数据放入您需要的每个视图中。这里的缺点是，当引用此工厂时，您将获取用户，而不是从控制器显式触发 getUser 函数。如果您想解决这个问题，您可以从第一次在 getUser 函数中请求它时存储承诺，如果它已经设置，则只需 return 承诺所有后续调用，这样您就可以多次调用 getUser 而无需重复API 请求。

Answer 3

我这里有一个类似的场景..我希望它能帮助别人...

我的工厂..

 angular.module('programList.services',[])
    .factory('PROGRAMS', function($http) {
     return {
       getprogramList: function() {
       return $http.get('/api/programs/list').then(function(result) {
       return result.data[0];
       });
      }
     };
    });

这是我的控制器..

 angular.module('programList.services'])
 .controller('tviProgramsController',
    function($scope,$state,$stateParams,PROGRAMS){
        //this is the call to access the list as answered by Benjamin Above using then on success 
        PROGRAMS.getprogramList().then(function(list){
                  $scope.programlist = list;
              });
  });

;

这是在服务器端的路由器上...

  var express     = require('express'),
     programscontroller = require(path + 'programservercontroller'),
     router         = new express.Router();
     router.get('/api/programs/list', programscontroller.programlist);

这是 mysql 调用的模块

var con   = require('../../database/dbcon'),
mysql = require('mysql');

module.exports.programlist = function(req, res){
 var data = req.params.data;
 var sql = "CALL `sp_programlist`";
  con.query(sql, function(err, result) {
      if(err){
          throw err;
      } else {
          res.send(JSON.stringify(result));
      }
     });
};

Angular http returns $$状态对象

Angular http returns $$state object

javascript

angularjs

angular-services