（AngularJS）如何$ http.get数据并将其存储在服务中

Question

如您所见，我在AngularJS，JS和Web开发中都是新手=）对此感到非常抱歉，但我尝试这样做。

我尝试使用AngularJS控制器构建大型的Web表单（大约200个不同的字段）。我需要从控制器访问根数据源。AngularJS团队要求不要只为存储数据而提供服务，而是要为加载和保存数据（从服务器上的.json文件开始）提供服务。

服务：

AppName.factory('MasterData', ['$rootScope', '$http', '$q', '$log', 
    function($rootScope, $http, $q, $log) {

    var responseData;
    $http.get('/getdata.php').then(function (response) {
        responseData = response.data;
        console.log(response.data);
    });

    return responseData;

}]);

控制器：

AppName.controller('justController', ['$scope', 'MasterData', '$log',
    function ($scope, MasterData, $log) {
        $scope.data = MasterData.justControllerSectionData;
        console.log(MasterData);
    }
]);

控制器返回未定义。但是来自服务的console.log返回该对象。我觉得这个问题太容易了，但是我找不到解决方法的方法:(同样，我也无法使用.getData（）之类的功能从控制器到服务，因为每次加载任何控制器时，它都会从服务器询问数据。我在AngularJS应用程序中使用12-14个控制器（完整的Web表格按部分划分）中的路由，我认为从后端一次获取数据是很好的。

PS：我认为promise存在问题，但是当我尝试使用这样的代码时：

var defer = $q.defer();
$http.get('/getdata.php').success(function(data){
    defer.resolve(data);
});
return defer;

我有解决的对象，拒绝等等。真的不明白我该怎么办:(

帮我获取控制器中的数据:)

Answer 1

您的代码不起作用，因为您success()在服务中提供的回调被异步调用；服务返回后，即：

顺序是这样的：

1. 将function在MasterData运行。该$http.get请求被启动并附加了promise回调。responseData在此回调中被引用（又称“关闭”）。
2. 该功能从服务返回到控制器。responseData尚未设置，不会阻止父范围函数返回。
3. $http.get成功并responseData在服务中设置，但是控制器无法访问。

如果success()您不清楚嵌套函数的作用域，则建议阅读有关JavaScript中闭包的信息（一般来说，甚至更好）

您可以通过以下服务实现您的目标：

function($q, $http, /* ... */) {    
    return {
        getData: function() {
            var defer = $q.defer();
            $http.get('/getdata.php', { cache: 'true'})
            .then(function(response) {
                defer.resolve(response);
            });

            return defer.promise;
    };
}

该$http服务将愉快地缓存您的响应数据，因此您不必这样做。请注意，您需要从defer红色对象中检索promise 才能完成此工作。

控制器是这样的：

/* omitted */ function($scope, YourService) {
    YourService.getData().then(function(response) {
        $scope.data = response.data;
    });
}

由于成功折旧了，因此我将成功修改为那时。