javascript - 通过服务 Angular 加载本地 json 文件

Question

我正在尝试在与我的服务文件相同的目录中加载本地 json 文件。

没有 JS 错误，在 Net 选项卡下，我可以看到已加载 json 文件。

然而，将响应 txt 设置为变量“static_obj”不会加载 JSON 数据。当我将 JSON 数据硬编码为 var WEBTEST = {} 时，它加载得很好。为什么？

'use strict';

webTestApp.factory('webtest', function ($q, $timeout) {
var Webtest = {
    //Methods exposed for the class
    fetch: function(callback){
        //fetch the data from below hard coded
        var deferred = $q.defer();        
        var static_obj = [];
        var promised = deferred.promise;
        var xobj = new XMLHttpRequest();

        //giving an artificial delay of .03 seconds..
        //controller will render the page & will show the service data after .03 seconds
        $timeout(function(){
            xobj.overrideMimeType("application/json");
            xobj.open('GET', 'angular/scripts/services/webtest.json', true);
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    static_obj = $.parseJSON(xobj.responseText);
                }
            };
            xobj.send(null);
            promised.then(callback(static_obj))
        }, 30);

        return promised;
    }
}

return Webtest;
});

下面的代码工作得很好，但我希望能够加载 json 文件而不是对 JSON 进行硬编码。

'use strict';

webTestApp.factory('webtest', function ($q, $timeout) {
var Webtest = {
    //Methods exposed for the class
    fetch: function(callback){
        //fetch the data from below hard coded
        var deferred = $q.defer();        
        var static_obj = null;
        var promised = deferred.promise;

        //giving an artificial delay of .03 seconds..
        //controller will render the page & will show the service data after .03 seconds
        $timeout(function(){
            static_obj = WEBTEST;
            promised.then(callback(static_obj))
        }, 30);

        return promised;
    }
}

return Webtest;
});

var WEBTEST = [
{"id": "0","Name": "Items 0", "Description": "Description 0"},
{"id": "1","Name": "Items 1", "Description": "Description 1"},
{"id": "2","Name": "Items 2", "Description": "Description 2"},
{"id": "3","Name": "Items 3", "Description": "Description 3"},
{"id": "4","Name": "Items 4", "Description": "Description 4"},
{"id": "5","Name": "Items 5", "Description": "Description 5"},
{"id": "6","Name": "Items 6", "Description": "Description 6"},
{"id": "7","Name": "Items 7", "Description": "Description 7"},
{"id": "8","Name": "Items 8", "Description": "Description 8"},
{"id": "9","Name": "Items 9", "Description": "Description 9"},
{"id": "10","Name": "Items 10", "Description": "Description 10"},
{"id": "11","Name": "Items 11", "Description": "Description 11"},
{"id": "12","Name": "Items 12", "Description": "Description 12"},
{"id": "13","Name": "Items 13", "Description": "Description 13"},
{"id": "14","Name": "Items 14", "Description": "Description 14"},
{"id": "15","Name": "Items 15", "Description": "Description 15"},
{"id": "16","Name": "Items 16", "Description": "Description 16"},
{"id": "17","Name": "Items 17", "Description": "Description 17"},
{"id": "18","Name": "Items 18", "Description": "Description 18"},
{"id": "19","Name": "Items 19", "Description": "Description 19"},
{"id": "20","Name": "Items 20", "Description": "Description 20"},
{"id": "21","Name": "Items 21", "Description": "Description 21"},
{"id": "22","Name": "Items 22", "Description": "Description 22"},
{"id": "23","Name": "Items 23", "Description": "Description 23"},
{"id": "24","Name": "Items 24", "Description": "Description 24"},
{"id": "25","Name": "Items 25", "Description": "Description 25"},
{"id": "26","Name": "Items 26", "Description": "Description 26"},
{"id": "27","Name": "Items 27", "Description": "Description 27"},
{"id": "28","Name": "Items 28", "Description": "Description 28"},
{"id": "29","Name": "Items 29", "Description": "Description 29"},
{"id": "30","Name": "Items 30", "Description": "Description 30"},
{"id": "31","Name": "Items 31", "Description": "Description 31"},
{"id": "32","Name": "Items 32", "Description": "Description 32"},
{"id": "33","Name": "Items 33", "Description": "Description 33"},
{"id": "34","Name": "Items 34", "Description": "Description 34"},
{"id": "35","Name": "Items 35", "Description": "Description 35"},
{"id": "36","Name": "Items 36", "Description": "Description 36"},
{"id": "37","Name": "Items 37", "Description": "Description 37"},
{"id": "38","Name": "Items 38", "Description": "Description 38"},
{"id": "39","Name": "Items 39", "Description": "Description 39"},
{"id": "40","Name": "Items 40", "Description": "Description 40"},
{"id": "41","Name": "Items 41", "Description": "Description 41"},
{"id": "42","Name": "Items 42", "Description": "Description 42"},
{"id": "43","Name": "Items 43", "Description": "Description 43"},
{"id": "44","Name": "Items 44", "Description": "Description 44"},
{"id": "45","Name": "Items 45", "Description": "Description 45"}
];

Answer 1

有没有理由不使用 $http 服务中的构建来获取 JSON？它可以更简单:

webTestApp.factory('webtest', function($timeout, $http) {
    var Webtest = {
        fetch: function() {
            return $timeout(function() {
                return $http.get('webtest.json').then(function(response) {
                    return response.data;
                });
            }, 30);
        }
    }

    return Webtest;
});

在 Controller 中:

webtest.fetch().then(function(data) {
    $scope.data = data;
});

固定代码如下:

http://plnkr.co/edit/f1HoHBGgv9dNO7D7UfPJ?p=preview

无论如何，您的问题是您返回了 promise 但从未解决 (deferred.resolve) 它。在这一行

promised.then(callback(static_obj))

你没有 resolve promise，而是用一些数据手动调用 callback。它之所以有效，是因为在硬编码的 json 对象的情况下，它已经在页面中可用，但在 ajax 请求的情况下，您尝试在响应到来之前调用它。因此，您需要将 promised.then(callback(static_obj)) 移动到 onreadystatechange 函数中。但是，如果您采用这种方式，则根本不需要延迟和 promise ，只需使用回调即可。