5.1JavaScript精华
9、使用Promises
Promises,是Javascript表现item的一种方式。它执行异步工作,在未来的某个时间点完成。遇到最多的promises,是使用Ajax请求。浏览器在后台发起HTTP请求,当请求完成,会使用promise提醒你的应用。在线面,作者创建了一个最小的AngularJS应用,来做一个Ajax请求。
<!DOCTYPE html> <html ng-app="demo"> <head> <title>Example</title> <script <link <link <script var myApp = angular.module("demo", myApp.controller("demoCtrl", var promise = $http.get("todo.json"); promise.success(function $scope.todos = data; }); }); </script> </head> <body ng-controller="demoCtrl"> <div <h1>To Do</h1> <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> <script <link <link <script var myApp = angular.module("demo", myApp.controller("demoCtrl", $http.get("todo.json").then(function $scope.todos = response.data; }, $scope.todos = }).then(function $scope.todos.push({action: }); }); </script> </head> <body ng-controller="demoCtrl"> <div <h1>To Do</h1> <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精华的更多相关文章
- 如何找出标有"App Store 精华","Essentials"的所有软件?
如何找出标有"App Store 精华","Essentials"的所有软件? 中国区: +"App Store 精华" site:http ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- iteye上总结的编程精华资源
原文:http://www.iteye.com/magazines/130 博客是记录学习历程.分享经验的最佳平台,多年以来,各路技术大牛在ITeye网站上产生了大量优质的技术文章,并将系列文章集结成 ...
- MVCC PostgreSQL实现事务和多版本并发控制的精华
原创文章,同步发自作者个人博客,http://www.jasongj.com/sql/mvcc/ PostgreSQL针对ACID的实现机制 事务的实现原理可以解读为RDBMS采取何种技术确保事务的A ...
- 【资源】C++学习资料 - 逆天整理 - 精华无密版【最新】
再失效就太无语了,链接都是多份的~~—————————————————基础——————————————C++环境搭建(全套)http://pan.baidu.com/s/1o6y0smY链接:http ...
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发人员和设计师必读精华文章【系列二十六】
<Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
随机推荐
- Android Error:warning: Ignoring InnerClasses attribute for an anonymous inner class
今天项目发布时遇到了这个问题,在低版本设备上面死活发布不上去,还有打包也打不成功,折腾了好长一段时间,网上大部分给出的 解决方案都是说 在工程的混淆配置文件 proguard-rules.pro 中加 ...
- 01 viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- python_GUI
1. 需要安装wxPython软件 2. GUI(图形用户界面)代码的编写顺序 备注: 1. 加入面板和布局管理器,可以使得组件的位置和大小更加灵活 3. 示例: #encoding=utf-8 i ...
- WCF第一个Demo
参考文献:http://www.cnblogs.com/artech/archive/2007/02/26/656901.html 自己学习的Demo 第一个是控制台宿主服务,第二个是Windows服 ...
- Baseline管理
1.创建基线 SQL> exec dbms_workload_repository.create_baseline(start_snap_id=>,end_snap_id=>,bas ...
- linux 命令之 insmod
man insmod: INSMOD(8) insmod INSMOD(8) NAME insmod - Simple program to insert a module into the Linu ...
- ViewController添加子控制器 并且弹出
/** * 初始化子控制器 */ - (void)setupChildVcs { for (int i = 0; i<6; i++) { UIViewController *vc = [[UI ...
- 树形DP(Rebuilding Roads poj1947)
题意:给出一颗树,求要形成一颗元素个数是p的子树,最少要去掉多少边 #include"stdio.h" #include"string.h" #include& ...
- maven的pom报plugins却是的解决方法(转)
maven的pom报plugins却是的解决方法. 引用 Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom: ...
- bzoj1758 [Wc2010]重建计划 & bzoj2599 [IOI2011]Race
两题都是树分治. 1758这题可以二分答案avgvalue,因为avgvalue=Σv(e)/s,因此二分后只需要判断Σv(e)-s*avgvalue是否大于等于0,若大于等于0则调整二分下界,否则调 ...