码迷,mamicode.com
首页 > 编程语言 > 详细

5.1JavaScript精华

时间:2014-06-16 06:01:04      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   java   http   ext   

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章。

 

 

 

 

 

5.1JavaScript精华,布布扣,bubuko.com

5.1JavaScript精华

标签:des   style   class   java   http   ext   

原文地址:http://www.cnblogs.com/hsuyafeng/p/3784003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!