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正是我在我的项目中所做的，但我分叉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;
});

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

Answer 1

您使用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承诺（这就是为什么$scope.data有效并且不需要$scope.data.data），但它代表antipattern，所以你应该坚持你的原始方法（或使用我在第一段中给你的简化版本。）

Angular服务从本地文件中获取JSON不起作用

1 个答案: