javascript - (Angularjs) 如何 $http.get 数据并将其存储在服务中

Question

正如您将看到的，我是 AngularJS、JS 和 Web 开发的新手 =) 对此深表歉意，但我会尽力。

我尝试使用 AngularJS Controller 构建一个庞大的网络表单(大约 200 个不同的字段)。我需要从 Controller 访问根数据源。 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;

}]);

Controller :

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

Controller 返回未定义。但是来自服务的 console.log 返回了对象。我觉得这个问题太简单了，但我找不到解决方法:(我也不能使用像 .getData() 这样的函数从 Controller 到服务，因为它每次加载任何 Controller 时都会从服务器询问数据。我在具有 12-14 个 Controller 的 AngularJS 应用程序中有路由(完整的网络表单按部分划分)，我认为从后端获取一次数据是很好的。

附言我认为 promise 有问题，但是当我尝试使用这样的代码时:

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

我有 object with resolve, reject 等等。真的不明白我能用它做什么:(

帮我获取 Controller 中的数据:)

Answer 1

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

顺序是这样的:

1. 运行MasterData 中的函数。 $http.get 请求已启动并附加了 promise 回调。 responseData 在此回调中被引用(又名“结束”)。
2. 该函数从服务返回到您的 Controller 。 responseData 尚未设置，这不会阻止父作用域函数返回。
3. $http.get 成功并且 responseData 在服务中设置，但 Controller 无法访问。

如果您不清楚 success() 中嵌套函数的作用域，我建议您阅读 JavaScript 中的闭包(或者更好，一般来说)，例如 here .

您可以通过这样的服务实现您的目标:

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 服务将愉快地缓存您的响应数据，因此您不必这样做。请注意，您需要从 deferred 对象中检索 promise 才能使其正常工作。

Controller 是这样的:

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

由于success是贬值的，所以我把success修改成then。