Question

我想使用角度工厂从服务器获取数据。这就是我所做的。

.factory('Profile',function($http){
        return {
            getProfile: function(id){
                $http.get(httpUrl + 'vendors/detail?id=' + id).then(function(result){
                    return result.data;
                });
            }
        }
    })

在控制器中，我这样称呼Profile

.controller('profileCtrl', function($scope,$http,Profile){
        $scope.contact = function(id){
            $scope.vendor = Profile.getProfile(id);
            console.log($scope.vendor);
        }
}

但我总是从日志中得到undefined。我期待从服务器返回json个数据。我怎么能正确地做到这一点？

Answer 1

你的方法的问题在于你没有兑现承诺。

            $http.get(httpUrl + 'vendors/detail?id=' + id).then(function(result){
                return result.data;
            });

这里return result.data;不是一个承诺，所以当你在控制器中处理它时，你会错过响应，因为它是一个异步过程（即你的数据还没有从服务器到达）所以你得到了未定义的

factory.js

  .factory('Profile',function($http){
    return {
        getProfile: function(id){
            return $http.get(httpUrl + 'vendors/detail?id=' + id);
        }
    }
 })

controller.js

中的

   .controller('profileCtrl', function($scope,$http,Profile){
    $scope.contact = function(id){
        Profile.getProfile(id).then(function(response){
           $scope.vendor = response.data;
     });
        console.log($scope.vendor);
    }
 }

OR

如果您想在发送到控制器之前操纵响应

，请使用此选项

  .factory('Profile',function($http,$q){
    return {
        getProfile: function(id){ 
            var  deferred = $q.defer();
            $http.get(httpUrl + 'vendors/detail?id=' + id).then(function(resp){ 
                // modify the "resp" and then return
                deferred.resolve(resp);
            },function( error ){
              deferred.reject(error);
          })
        }
       return deferred.promise;
    }
 })

controller.js

中的

   .controller('profileCtrl', function($scope,$http,Profile){
    $scope.contact = function(id){
        Profile.getProfile(id).then(function(response){
           $scope.vendor = response;
     });
        console.log($scope.vendor);
    }
 }

Answer 2

您的工厂方法 getProfile（）不会返回任何内容。 $ http.get的 .then（）内的返回值将返回要在下一个 .then（）中使用的值。

最好的选择是返回整个$ http调用。像这样：

getProfile: function(id){
    return $http.get(httpUrl + 'vendors/detail?id=' + id).then(function(result){
        return result.data;
    });
}

您可以将返回值保留在内部，以便您执行的下一个 .then（）已经具有正确的参数，而无需执行“result.data”。像这样：

.controller('profileCtrl', function($scope,$http,Profile){
    $scope.contact = function(id){
        Profile.getProfile(id).then(function(response) {
            $scope.vendor = response;
            console.log($scope.vendor);
        });
    }
}

$ http调用返回一个可以链接的promise。您在承诺中返回的所有内容都可以在下一个链中使用。 more info

Answer 3

您的代码存在轻微问题。当Profile.getProfile(id)初始化$scope.vendor console.log($scope.vendor);已经执行时，这就是undefined

的原因

您要做的是console.log($scope.vendor);在您工厂的then。类似的东西： -

Profile.getProfile(id) 
.then(function(response){ 
   $scope.vendor = response.data.value;
   console.log($scope.vendor);
});

Answer 4

我认为你错过了你的括号，也许在你的factory，你需要像这样打电话给工厂：

.controller('profileCtrl', ['$scope','$http','Profile',  
  function($scope,$http,Profile){
    $scope.contact = function(id){
        $scope.vendor = Profile.getProfile(id);
        console.log($scope.vendor);
    }
}]);

希望这个帮助

如何在工厂发出http请求

4 个答案:

OR