时间:2021-05-28
本文实例讲述了AngularJS中的promise用法。分享给大家供大家参考,具体如下:
JavaScript异步回调有好处也有坏处,回调函数大量嵌套十分复杂.所以javascript中还有另一种异步处理模式叫promises.在AngularJS中的实现就是$q服务.
下面是一些小例子.
then,catch,finally
在链最后的 catch 为整个链式处理提供一个异常处理点
在链最后的 finally 总是会被执行,不管 promise 被处理或者被拒绝,起清理作用
then第三个参数(表征状态)的应用
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="jquery.min.js"></script> <script src="angular.min.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript"> var myapp = angular.module('myapp', []); myapp.controller('myController', function($scope, dataService) { $scope.send = function() { dataService.getData() .then(function success(data) { console.log(data); }, function error(error) { console.log(error); }, function status(process) { console.log(process); }); }; }); myapp.factory('dataService', function($q, $interval) { return { getData : function() { var deferred = $q.defer(); var process = 0; var interval = $interval(function() { process += 10; deferred.notify(process); //reject之后不再继续运行 // if (process == 50) { // deferred.reject(process); // } if (process >= 100) { $interval.cancel(interval); deferred.resolve(process); } }, 1000); return deferred.promise; } }; }); </script> <style type="text/css"> </style> </head> <body ng-app="myapp"> <div ng-controller="myController"> <button class="btn" ng-click="send()">click</button> </div> </body></html>then链式
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="jquery.min.js"></script> <script src="angular.min.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript"> var myapp = angular.module('myapp', []); myapp.controller('myController', function($scope, $q) { $scope.send = function() { var deferred = $q.defer(); var promise = deferred.promise; promise .then(function() { console.log('1.....') }) .then(function() { console.log('2....'); }); deferred.resolve('resolve'); }; }); </script> <style type="text/css"> </style> </head> <body ng-app="myapp"> <div ng-controller="myController"> <button class="btn" ng-click="send()">click</button> </div> </body></html>then链会把上一个 then 的返回结果传递给调用链的下一个 then (如果没有就是 undefined).
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="jquery.min.js"></script> <script src="angular.min.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript"> var myapp = angular.module('myapp', []); myapp.controller('myController', function($scope, $q, $timeout) { $scope.send = function() { var deferred = $q.defer(); var promise = deferred.promise; deferred.resolve('resolve'); promise .then(function(data) { console.log(data); var _deferred = $q.defer(); $timeout(function() { _deferred.resolve('resolve_'); }, 1000); return _deferred.promise; }) .then(function(data) { console.log(data); }); }; }); </script> <style type="text/css"> </style> </head> <body ng-app="myapp"> <div ng-controller="myController"> <button class="btn" ng-click="send()">click</button> </div> </body></html>如果 then 返回一个 promise 对象,下一个 then 只会在这个 promise 被处理结束的时候调用。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况。最简单的处理就是每个promise都then。如下:varapp
AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法。AngularJS中forEach的用法如下:angular.forEach(a
昨天更新的是“JavaScript中的Promise使用详解”,其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出。今天就说一说“
promise基本用法Promise对象是一个构造函数,用来生成Promise实例。Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resol
本文实例讲述了es6中Promise对象基本功能与用法。分享给大家供大家参考,具体如下:Promise是异步编程的一种解决方案,解决——回调函数和事件ES6规定