javascript AngularJS：来自服务的异步 $http.jsonp 调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14463719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Async $http.jsonp call from a service
提问by user103583
I am trying to write a simple app that does the following: 1. User inputs 2 parameters & clicks a button 2. Angular calls an external JAVA Servlet that returns JSON 3. App outputs the json string to the screen
我正在尝试编写一个执行以下操作的简单应用程序： 1. 用户输入 2 个参数并单击按钮 2. Angular 调用返回 JSON 的外部 JAVA Servlet 3. 应用程序将 json 字符串输出到屏幕
I have a problem however, as when i click the button nothing happens. I believe (due to testing) that the reason this happens is that since the call is async, the variable that is returned is null.
但是，我遇到了问题，因为当我单击按钮时什么也没有发生。我相信（由于测试）发生这种情况的原因是由于调用是异步的，返回的变量为空。
Pertinent code:
相关代码：
controllers.js
控制器.js
function myAppController($scope,kdbService) {
$scope.buttonClick = function(){
var dat = kdbService.get($scope.tName,$scope.nRows);
$scope.data = dat;
}
}
services.js
服务.js
angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
var server="http://localhost:8080/KdbRouterServlet";
return {
get: function(tname,n){
var dat;
$http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
console.log("1");
console.log(data);
dat=data;
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
console.log("2");
console.log(dat);
return dat;
}
}
});
index.html
索引.html
<!-- Boilerplate-->
<h1>Table Viewer</h1>
<div class="menu" >
<form>
<label for="tName">Table Name</label>
<input id="tName" ng-model="tName"><br>
<label for="nRows">Row Limit</label>
<input id="nRows" ng-model="nRows"><br>
<input type="submit" value="Submit" ng-click="buttonClick()">
</form>
</div>
{{data}}
<!-- Boilerplate-->
When i execute the code and push the button, nothing happens. However, if i look in my log, i see this:
当我执行代码并按下按钮时，什么也没有发生。但是，如果我查看我的日志，我会看到：
2
undefined
1
Object {x: Array[2], x1: Array[2]}
Clearly, what is happening is that the success function returns after the get function has returned. Therefore the object put into $scope.data is undefined, but the object returned from the jsonp call is left behind.
显然，发生的事情是在 get 函数返回后成功函数返回。因此放入 $scope.data 的对象是未定义的，但是从 jsonp 调用返回的对象被留下了。
Is there a correct way to be doing this? Most of the tutorials I see assign the data to the $scope variable insidethe success function, thereby skipping this problem. I want my service to be detached if possible.
有没有正确的方法来做到这一点？我看到的大多数教程都将数据分配给成功函数内的$scope 变量，从而跳过了这个问题。如果可能，我希望我的服务分离。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by mpm
i would do something like that :
我会做这样的事情：
controller
控制器
function myAppController($scope,kdbService) {
$scope.kdbService = kdbService;
$scope.buttonClick = function(){
$scope.kdbService.get($scope.tName,$scope.nRows);
}
}
service
服务
angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
var server="http://localhost:8080/KdbRouterServlet";
return {
data:{},
get: function(tname,n){
var self = this;
$http.jsonp(server+"?
query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
console.log("1");
console.log(data);
self.data = data;
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
}
}
});
html
html
{{kdbService.data}}
OR
或者
use continuation in the get method :
在 get 方法中使用延续：
controller
控制器
function myAppController($scope,kdbService) {
$scope.buttonClick = function(){
kdbService.get($scope.tName,$scope.nRows,function success(data){
$scope.data = data;
});
}
}
service
服务
get: function(tname,n,successCallback){
$http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
successCallback(data,status,headers,config);
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
}
OR use the $resource service
或使用 $resource 服务
http://docs.angularjs.org/api/ngResource.$resource ( you'll need the angular-resource module
http://docs.angularjs.org/api/ngResource.$resource （你需要 angular-resource 模块
code not tested.
代码未测试。
I want my service to be detached if possible.
如果可能，我希望我的服务分离。
then put the "data object" in a "data service" calling a "data provider service". You'll have to call the "data provider service" somewhere anyway. There is no skipping this problem in my opinion, since that's how javascript work.
然后将“数据对象”放入调用“数据提供者服务”的“数据服务”中。无论如何，您都必须在某处调用“数据提供者服务”。我认为没有跳过这个问题，因为这就是 javascript 的工作方式。
also use angular.controller("name",["$scope,"service",function($s,s){}]);
也用 angular.controller("name",["$scope,"service",function($s,s){}]);
so you will not need to care how parameters are called , as long as they are defined and injected properly.
所以你不需要关心如何调用参数，只要它们被正确定义和注入。
