promise对象,以及其在Angular中的使用
来源:互联网 发布:快走丝编程用什么软件 编辑:程序博客网 时间:2024/05/17 08:14
promise
一种处理异步编程的模式,可以有效解决回调的繁琐,并以一种同步的方式去处理业务流程,同时,允许在回调中采用链式的写法,处理的代码更加优雅。
想要在Angular中创建一个promise
对象,必须在模板中先注入$q
服务,并先调用defer
方法创建一个延期对象:
angular.module('myapp',[]) .controller('myController',['$scope','$q',function($scope,$q){ var defer=$q.defer(); }])
其中,defer
是一个延期对象,它包括三个方法:notify resolve reject
,以及一个名为promise
的属性。
在这3个方法中,都可以通过value参数进行传值,当调用延期对象的promise
属性时,就创建了一个promise
对象。
一旦创建了promise
对象,就可以通过调用then
的方法来执行延期对象不同操作后的回调函数:
promise.then(successCallback,errorCallback,notifyCallback)
5.1 promise
对象的创建使用
<div ng-controller='myController'> <div> <div>{{t0}}</div> <div>{{t1}}</div> <button ng-click='action(true)'>解决</button> <button ng-click='action(false)'>拒绝</button> </div> </div> <script type="text/javascript"> angular.module('myapp',[]) .controller('myController',['$scope','$q',function($scope,$q){ var defer=$q.defer(); $scope.action=function(type){ defer.notify(0); type?defer.resolve(1):defer.reject(1); } var promise=defer.promise; promise.then(function(n){ n++; $scope.t1='已处理完成:'+n; },function(n){ n++; $scope.t1='未完成原因:'+n; },function(n){ n++; $scope.t0='正在处理中:'+n; }) }]) </script>
值得注意的是,无论是调用resolve
还是reject
,都需要首先调用notify
。
此外,在$q
中,还有一个all
方法,该方法的功能是返回一个新的promise
对象,方法的参数是一个promise
数组,当数组中所有的defer
都解决时,才会饭一个解决后的promise
对象,否则,只要有一个defer对象调用了reject
,那么,返回对象也将调用reject
方法。
5.2 promise
在$Http
中的应用
<div ng-controller='myController'> <div> {{result}} </div> </div> <script type="text/javascript"> angular.module('myapp',[]) .factory('async',['$q','$http',function($q,$http){ var defer=$q.defer(); $http.get('/async') .then(function(data){ defer.resolve(data); },function(reason){ defer.reject(reason); }); return defer.promise; }]) .controller('myController',['$scope','async',function($scope,async){ var promise=async; promise.then(function(resp){ $scope.result='请求成功:'+resp.data; },function(resp){ $scope.result='请求成功:'+resp; }) }]) </script>
对应的服务器端代码(Express):
app.get('/async',function(req,res){ res.send('今天天气不错。'); });
1 0
- promise对象,以及其在Angular中的使用
- 在Angular中使用promise
- 浅谈Promise对象在ReactNative中的使用
- Javascript 在循环中使用Promise对象
- zTree在Angular中的使用
- 关于ES6中的promise用法以及在ajax中的应用
- Angular通信$q服务和promise对象
- ES6中的promise对象
- JS中的promise对象
- angular中的$q与promise(综合)
- JQ中的延迟对象deferred中的promise等的使用
- angular promise
- 关于JAVA中的listener回调机制,以及其在Android中的使用
- JS中的Promise 使用
- ES6中的Promise对象小结
- angular的$q服务以及js的promise编程
- Facebook登录-前端网页以及在angular中的使用方法
- Promise对象的基本使用
- Java中随机数方法的使用 math.random()
- 局部变量、全局变量、堆、堆栈、静态和全局的区别
- java学习之NIO(转)
- 有关matlab拟合工具箱的使用
- WebRTC中的拥塞控制 一
- promise对象,以及其在Angular中的使用
- 表生成器@ TableGenerator
- 树
- 【JZOJ4820】【NOIP2016提高A组模拟10.15】最大化
- Java中终止语句continue和break的使用
- Android接口与架构
- Linux下使用md5sum计算和检验MD5码
- Ubuntu14.04安装mongodb
- RFID实验