我正在尝试在与我的服务文件相同的目录中加载本地json文件。
没有JS错误，并且在[Net]标签下，我可以看到已加载json文件。
但是将响应txt设置为var“ 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"}
];
为什么不使用内置$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;
});
并在控制器中：
webtest.fetch().then(function(data) {
$scope.data = data;
});
这是固定代码：
无论如何，您的问题是您返回了promise但从未解决（deferred.resolve）。在这条线
promised.then(callback(static_obj))
您不解决承诺，而是手动调用callback一些数据。之所以起作用，是因为在使用硬编码的json对象的情况下，它已经在页面中可用了，但是在使用ajax请求的情况下，您尝试在响应到来之前调用它。因此，您需要promised.then(callback(static_obj))进入onreadystatechange功能。但是，如果您采用这种方式，则根本不需要延期和承诺，您只需使用回调即可。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句