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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
五个PHP程序员工具
2008/05/26 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Zabbix实现微信报警功能
2016/10/09 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Django models filter筛选条件详解
2020/03/16 Python
中软国际Java程序员机试题
2012/08/19 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
高一新生军训方案
2014/05/12 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
大学校园招聘会感想
2015/08/10 职场文书
技术入股合作协议书
2016/03/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
导游词之青岛崂山
2019/12/27 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript