AngularJS中的promise用法分析

2019-11-19 16:33:07

字体：大中小

来源：转载

供稿：网友

本文实例讲述了AngularJS中的promise用法。分享给大家供大家参考，具体如下：

JavaScript异步回调有好处也有坏处，回调函数大量嵌套十分复杂．所以javascript中还有另一种异步处理模式叫promises．在AngularJS中的实现就是$q服务．

下面是一些小例子．

then,catch,finally

在链最后的 catch 为整个链式处理提供一个异常处理点
在链最后的 finally 总是会被执行，不管 promise 被处理或者被拒绝，起清理作用

<!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('resolve.....')          }, function() {            console.log('reject.....');          }, function() {            console.log('notify.....');          })          .catch(function() {            console.log('catch..error..')          })          .finally(function() {            console.log('anywhere will be called..');          });          deferred.reject('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第三个参数(表征状态)的应用

<!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程序设计有所帮助。

上一篇：jQuery操作之效果详解

下一篇：nodejs制作爬虫实现批量下载图片