从本地文件获取JSON的角度服务不起作用

Angular service to get JSON from local file not working

本文关键字：服务 不起作用 JSON 文件 获取      更新时间：2023-09-26

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

plunkr在这里。这是我的服务代码：

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正是我在项目中所做的，但我分叉了另一个Plunkr，有人得到了同样的东西。我在这个StackOverflow答案中找到了它。

这是一个工作版本

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

我的问题是，为什么我的版本（第一个块）不起作用，而第二个块起作用？

您使用ret函数使它过于复杂。下面是您代码的简化版本，我只需返回$http调用返回的承诺：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承诺被解析时，实际的数据内容在response.data中，而不仅仅是response（完整的response实际上包含标头和其他与服务器调用相关的信息）。这是您的原始版本，包含这两个修复：http://plnkr.co/edit/mzsdTFWr3qAXGfizjRRC?p=preview

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

相关文章：