如何在AngularJS中处理异步HTTP调用
[英]How to handle Async http call in AngularJS
问题描述
I am new to Angularjs. 
我是Angularjs的新手。 I am creating some employee app which basically fetch the data from http call(json) and display it using angularjs. 我正在创建一些员工应用程序，该应用程序基本上是从http call(json)获取数据并使用angularjs显示数据。 The problem is before getting the response from http call my view got executed, so nothing displayed in my output page. 问题是在从http调用获取响应之前，我的视图已执行，因此输出页面中没有任何显示。 I know there should be some logic to handle the async call but i am not aware of that, so could someone please help me? 我知道应该有一些逻辑来处理异步调用，但是我不知道这一点，所以有人可以帮我吗？
Home.html Home.html
<html ng-app="employeeApp">
<head>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<meta charset="utf-8">
<title>Employee Example</title>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var employeeApp = angular.module('employeeApp', []);
employeeApp.controller('EmployeeCtrl', ['$http','$scope',
function(http, scope) {
http.get('http://localhost:9999/employee/7').success(
function(data) {
scope.employees = data;
});
} ]);
</script>
</head>
<body ng-controller="EmployeeCtrl">
<table class="table table-striped">
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
<th>LOCATION</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location}}</td>
</tr>
</table>
<hr>
<hr>
</body>
</html>
Actual output: 实际输出：
My Expected output: 我的预期输出：
Note: 注意：
If i load from json file or run from web browser i got the expected output but its not working in Angular script. 如果我从json文件加载或从Web浏览器运行，我会得到预期的输出，但在Angular脚本中不起作用。
http://localhost:9999/employee/7
{"id":7,"age":65,"name":"test","location":"singapore"}
3 个解决方案
解决方案1
4 已采纳 2015-03-18 00:42:05
You don't see any data because 'employees' is not array (ie your endpoint returns just one object). 您看不到任何数据，因为“员工”不是数组（即，端点仅返回一个对象）。
Either return array of object(s) from your endpoint or if you always get only one object then remove ng-repeat and replace 'employee' with 'employees' in your binding. 从端点返回对象数组，或者如果始终只得到一个对象，则删除ng-repeat并在绑定中将“ employee”替换为“ employees”。
Note: When you use object in ng-repeat then it will iterate properties in the object. 注意：在ng-repeat中使用对象时，它将迭代对象中的属性。
解决方案2
3 2015-03-18 04:03:52
You are expecting ng-repeat to get a "list" of objects. 您期望ng-repeat获得对象的“列表”。 What you are getting instead is a single object which ng-repeat is likely iterating though. 相反，您得到的是ng-repeat可能会迭代的单个对象。 Each property however does not have the expected properties of id, name etc. 但是，每个属性都没有id，name等的预期属性。
What you should be returning instead in your ajax response should more like this: 您应该在ajax响应中返回的内容应该更像这样：
[
{"id":7,"age":65,"name":"test","location":"singapore"},
{"id":7,"age":65,"name":"test","location":"singapore"},
{"id":7,"age":65,"name":"test","location":"singapore"},
{"id":7,"age":65,"name":"test","location":"singapore"}
]
Or, for a single item it would be: 或者，对于单个项目，它将是：
[
{"id":7,"age":65,"name":"test","location":"singapore"}
]
解决方案3
1 2015-03-18 07:25:47
You can use Chrome Developer Tool (press F12 on Chrome) to debug the script. 您可以使用Chrome开发者工具（在Chrome上按F12键）来调试脚本。 Watch "Network" tab for response data from server. 观看“网络”标签以获取来自服务器的响应数据。
One other way I usually use to check bug like this is to print directly the varaiable to the template like this: 我通常用来检查bug的另一种方法是直接将变量打印到模板，如下所示：
<body ng-controller="EmployeeCtrl">
{{employees}}
</body>
Sometime this helps me find out what happned to my data. 有时候这可以帮助我找出发生在我数据上的东西。 Just remember to clear that after you solve the problem :) 解决问题后，请记住清除以下内容：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.