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中String类的replace函数
Sep 22 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
javascript实现列表切换效果
May 02 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
详解webpack2异步加载套路
Sep 14 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
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
python实现红包裂变算法
2016/02/16 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python实现GIF图倒放
2020/07/16 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
专业技术职务聘任书
2014/03/29 职场文书
求职信标题怎么写
2014/05/26 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
超级详细实用的pycharm常用快捷键
2021/05/12 Python
python 下划线的多种应用场景总结
2021/05/12 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python