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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
几种响应式文字详解
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
附件名前加网站名
2008/03/23 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
原生js实现抽奖小游戏
2019/06/27 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python中黄金分割法实现方法
2015/05/06 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
如何基于Python批量下载音乐
2019/11/11 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python 复平面绘图实例
2019/11/21 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
2014大学校园光棍节活动策划书
2014/09/29 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
先进党支部申报材料
2014/12/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
地震捐款简报
2015/07/21 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
详解Spring事件发布与监听机制
2021/06/30 Java/Android