5.1JavaScript精华
9、使用Promises
Promises，是Javascript表现item的一种方式。它执行异步工作，在未来的某个时间点完成。遇到最多的promises，是使用Ajax请求。浏览器在后台发起HTTP请求，当请求完成，会使用promise提醒你的应用。在线面，作者创建了一个最小的AngularJS应用，来做一个Ajax请求。
|
<!DOCTYPE html> <html ng-app="demo"> <head> <title>Example</title> <scriptsrc="angular.js"></script> <linkhref="bootstrap.css"rel="stylesheet"/> <linkhref="bootstrap-theme.css"rel="stylesheet"/> <scripttype="text/javascript"> var myApp = angular.module("demo",[]); myApp.controller("demoCtrl",function($scope, $http){ var promise = $http.get("todo.json"); promise.success(function(data){ $scope.todos = data; }); }); </script> </head> <body ng-controller="demoCtrl"> <divclass="panel"> <h1>To Do</h1> <tableclass="table"> <tr><td>Action</td><td>Done</td></tr> <tr ng-repeat="item in todos"> <td>{{item.action}}</td> <td>{{item.done}}</td> </tr> </table> </div> </body> </html> |
作者创建了一个AngularJS模块，给他定义了一个叫做demoCtrl的控制器。该控制器使用$scope对象，提供数据给视图。
该模块，控制器，和视图，
|
var promise = $http.get("todo.json"); promise.success(function (data) { $scope.todos = data; }); |
$http服务（作者将在第20章描述），用于做Ajax请求，get方法含有你想要从服务器得到的文件的URL。
Ajax请求以异步执行，浏览器继续运行该程序，知道请求完成。$http.get方法返回一个promise对象，作者可以用来接收关于Ajax请求的提醒。在该例中，作者使用success方法来注册一个callback函数，当请求完成后被触发。Callback函数从服务器接收数据，作者用来指派一个属性给$scope。这时，ng-repeat指令使用to-do items分发table的内容。Success方法是三个promise对象定义中的一个。
|
Name |
Description |
|
Error(callback) |
指定一个callback函数，当Promise不能完成时，被调用 |
|
Success(callback) |
指定一个callback函数，当Promise完成时，被调用 |
|
Then(success,err) |
指定一个callback，如果promise成功或失败时被调用 |
这里有三个方法，以函数作为参数，基于promise的返回状态调用。Success callback函数，传递从服务器获取的数据，error callback接收遇到的问题明细。
提示：可以把promise定义的方法，理解为事件。
所有三种promise方法，返回其他promise对象，允许异步任务链式调用。
|
<!DOCTYPE html> <html ng-app="demo"> <head> <title>Example</title> <scriptsrc="angular.js"></script> <linkhref="bootstrap.css"rel="stylesheet"/> <linkhref="bootstrap-theme.css"rel="stylesheet"/> <scripttype="text/javascript"> var myApp = angular.module("demo",[]); myApp.controller("demoCtrl",function($scope, $http){ $http.get("todo.json").then(function(response){ $scope.todos = response.data; },function(){ $scope.todos =[{action:"Error"}]; }).then(function(){ $scope.todos.push({action:"Request Complete"}); }); }); </script> </head> <body ng-controller="demoCtrl"> <divclass="panel"> <h1>To Do</h1> <tableclass="table"> <tr><td>Action</td><td>Done</td></tr> <tr ng-repeat="item in todos"> <td>{{item.action}}</td> <td>{{item.done}}</td> </tr> </table> </div> </body> </html> |
这里，作者使用then方法两次，第一次处理$http.get方法的相应。
更多的Promise的例子在第20章，和第21章。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
