[英]Angular service to get JSON from local file not working
I tried creating a service that will get data from a local JSON file, but it's not working, and there's no explanation why not. 我尝试创建一个将从本地JSON文件获取数据的服务,但该服务无法正常工作,也没有解释为什么不这样做的原因。
The plunkr is here . 笨蛋在这里 。 Here's my code for the service:
这是我的服务代码:
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;
});
The Plunkr above is exactly what I was doing in my project, but I forked another Plunkr where someone got the same sort of thing was working. 上面的Plunkr正是我在项目中所做的,但是我分叉了另一个Plunkr ,有人在做同样的事情。 I found it at this StackOverflow answer.
我在这个StackOverflow答案中找到了它。
Here's a working version 这是一个工作版本
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;
});
My question is, why does my version (the first block) not work, but the second one does? 我的问题是,为什么我的版本(第一个块)不起作用,而第二个版本却起作用?
You are overcomplicating it with the ret
function. 您使用
ret
函数使它过于复杂。 Here is a simplified version of your code where I simply return the promise that $http call returns: http://plnkr.co/edit/9VaqIuOVHyMI12Z0r3jm?p=preview 这是您的代码的简化版本,其中我只是返回$ http调用返回的承诺:http: //plnkr.co/edit/9VaqIuOVHyMI12Z0r3jm?p=preview
To get your version to work, your ret
function needs to return something ($http is an async call, so it doesn't matter its success actually callback returns something): 为了使您的版本正常工作,您的
ret
函数需要返回一些内容($ http是一个异步调用,因此,成功回调实际上返回的内容并不重要):
var ret = function() {
return $http.get('webtest.json').success(function(data) {
// this ^^ is the key
return data;
});
};
Then, when the $http promise is resolved, the actual data content is in response.data
, not just response
(full response
actually contains headers and other server call-related info). 然后,当$ http承诺被解析时,实际的数据内容是在
response.data
,而不仅仅是response
(完整response
实际上包含标头和其他与服务器调用相关的信息)。 Here is your original version with those two fixes: http://plnkr.co/edit/mzsdTFWr3qAXGfizjRRC?p=preview 这是具有这两个修复程序的原始版本: http : //plnkr.co/edit/mzsdTFWr3qAXGfizjRRC?p=preview
That second example you wrote works because it return a simple $q promise (that's why $scope.data
works and $scope.data.data
is not needed), but it represents an antipattern , so you should stick with your original approach (or use the simplified version I gave you in the first paragraph). 您编写的第二个示例是有效的,因为它返回了一个简单的$ q承诺(这就是为什么
$scope.data
有效且不需要$scope.data.data
的原因),但它表示一个反模式 ,因此您应坚持使用原始方法(或使用我在第一段中给您的简化版本)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.