javascript - 从本地文件获取 JSON 的 Angular 服务不起作用

Question

我尝试创建一个从本地 JSON 文件获取数据的服务，但它不起作用，并且没有解释为什么不工作。

plunkr is here 。这是我的服务代码:

webTestApp.factory('webtest', function($q, $timeout, $http) {
    var Webtest = {
        fetch: function(callback) {
            var ret = function() {
                $http.get('webtest.json').success(function(data) {
                    return data;
                });
            };

            return ret();
        }
    };
    return Webtest;
});

上面的 Plunkr 正是我在项目中所做的，但我 fork 了 another Plunkr有人得到同样的东西正在工作。 我在这个StackOverflow answer.找到了它

这是一个工作版本

webTestApp.factory('webtest', function($q, $timeout, $http) {
    var Webtest = {
        fetch: function(callback) {

            var deferred = $q.defer();

            $timeout(function() {
                $http.get('webtest.json').success(function(data) {
                    deferred.resolve(data);
                });
            }, 30);

            return deferred.promise;
        }
    };

    return Webtest;
});

我的问题是，为什么我的版本(第一个 block )不起作用，但第二个却起作用？

Answer 1

您使用 ret 函数将其变得过于复杂。这是代码的简化版本，我只是返回 $http 调用返回的 promise :http://plnkr.co/edit/9VaqIuOVHyMI12Z0r3jm?p=preview

为了让您的版本正常工作，您的 ret 函数需要返回一些内容($http 是一个异步调用，因此它的成功回调实际上返回一些内容并不重要):

        var ret = function() {
            return $http.get('webtest.json').success(function(data) {
      // this ^^ is the key
                return data;
            });
        };

然后，当 $http Promise 被解析时，实际的数据内容在 response.data 中，而不仅仅是 response (完整的 response实际上包含 header 和其他服务器调用相关信息)。这是包含这两个修复的原始版本:http://plnkr.co/edit/mzsdTFWr3qAXGfizjRRC?p=preview

您编写的第二个示例之所以有效，是因为它返回一个简单的 $q promise (这就是为什么 $scope.data 有效并且不需要 $scope.data.data 的原因) ，但它代表 antipattern ，所以你应该坚持原来的方法(或者使用我在第一段中给你的简化版本)。