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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
vue请求数据的三种方式
Mar 04 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
vue.js中created方法作用
2018/03/30 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python 实现两个npy档案合并
2020/07/01 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
计算机科学系职业生涯规划书
2014/03/08 职场文书
银行金融服务方案
2014/06/11 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2015年商场工作总结
2015/04/27 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
如何用threejs实现实时多边形折射
2021/05/07 Javascript