javascript - change - Angular http devuelve $$ estado de objeto

title html css

Question

Tengo la siguiente fábrica definida:

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

Y mi controlador:

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

Aquí está la 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

El código anterior está devolviendo un objeto de estado en lugar del objeto de usuario. Pero a partir del registro, el objeto de estado tiene el objeto de usuario dentro del valor. ¿Cómo consigo el objeto de usuario? ¿O estoy haciendo esto completamente mal?

Sé que la otra forma es devolver $ http.get y llamar al método then () dentro del controlador. Pero usaré el objeto de usuario con frecuencia y si llamo al método then () en el controlador, es casi lo mismo que usar el $ http.get en el controlador en lugar de la fábrica.

Answer 1

La E / S de JavaScript suele ser, incluso en este caso asíncrona. Su llamada getUser devuelve una promesa de $ q. Para desenvolverlo, debe encadenar y luego desenvolverlo como tal:

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

Si está utilizando enrutamiento, es posible que también desee ver la opción de resolve en la ruta. También vea esta pregunta relacionada .

Answer 2

Tengo aquí un escenario similar ... Espero que ayude a alguien ...

mi fabrica ..

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

Este es mi controlador ..

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

;

Esto está en el enrutador en el lado del servidor ...

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

Este es el modulo para la llamada 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));
      }
     });
};

Answer 3

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

En su opinión

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

Ediciones basadas en comentarios, es cierto que esto no funcionaría con el controlador o la vista como probablemente los tuvo, pero este patrón funciona bien y elimina la necesidad de tener .then en cada controlador que pueda reutilizar los datos.

Normalmente, el almacenamiento de su modelo en la fábrica o el servicio que se ocupa de recuperar los datos facilita el acceso a cada vista donde la necesita. El lado negativo aquí es que usted estaría buscando al usuario cuando se hace referencia a esta fábrica en lugar de disparar explícitamente la función getUser desde el controlador. Si desea evitar eso, puede almacenar la promesa desde la primera vez que se solicita en la función getUser y simplemente devolver esa promesa para todas las llamadas subsiguientes, si ya está establecida, de esta manera puede llamar a getUser varias veces sin repetir la solicitud de API.