AngularJS中的promise用法分析


Posted in Javascript onMay 19, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
详解AngularJS controller调用factory
May 19 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
angular4实现带搜索的下拉框
Mar 25 Javascript
几种响应式文字详解
May 19 #Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 #Javascript
vue.js动态数据绑定学习笔记
May 19 #Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 #Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 #Javascript
angularjs封装$http为factory的方法
May 18 #Javascript
bootstrap表单示例代码分享
May 18 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP比你想象的好得多
2014/11/27 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Python交换变量
2008/09/06 Python
Python ZipFile模块详解
2013/11/01 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python扩展内置类型详解
2018/03/26 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
法学毕业生自荐信
2013/11/13 职场文书
规划编制实施方案
2014/03/15 职场文书
企业文化标语大全
2014/06/10 职场文书
物理学专业自荐信
2014/06/11 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2016教师国培研修感言
2015/12/08 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server