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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
Java File类的常用方法总结
Mar 18 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php中的strpos使用示例
2014/02/27 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python实现的科学计算器功能示例
2017/08/04 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
实习护士自我鉴定
2013/10/13 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
五一服装活动方案
2014/01/11 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
工程材料采购方案
2014/05/18 职场文书
Python+Appium新手教程
2021/04/17 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL