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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
js jquery数组介绍
Jul 15 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
全面解析js中的原型,原型对象,原型链
Jan 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 file_exists问题杂谈
2012/05/07 PHP
PHP连接access数据库
2015/03/27 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
js更优雅的兼容
2010/08/12 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
企业精细化管理实施方案
2014/03/23 职场文书
2014高考励志标语
2014/06/05 职场文书
买卖合同协议书范本
2014/10/18 职场文书
项目投资意向书范本
2015/05/09 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers