angularjs中的promise

最新推荐文章于 2017-09-01 14:04:14 发布
最新推荐文章于 2017-09-01 14:04:14 发布
阅读量552 收藏
点赞数
分类专栏： Angularjs 文章标签： angularjs promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014788227/article/details/50419681
版权

javascript异步回调有好处也有坏处，回调函数大量嵌套十分复杂．所以javascript中还有另一种异步处理模式叫ｐｒｏｍｉｓｅｓ．在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">
        <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">
        <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">
        <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">
        <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 被处理结束的时候调用。



timelessmemoryli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给你一个承诺 - 玩转 AngularJS 的 Promise
weixin_34236497的博客
05-23 163
了解Promise 在谈论Promise之前我们要了解一下一些额外的知识；我们知道JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务。 这种“单线程”的好处就是实现起来比较简单，容易操作；坏处就是容易造成阻塞，因为队列中如果有一个...
AngularJS中的Promise
wjxbj的博客
08-25 212
一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var currentProfile = null; var username = '...
AngularJs 之 Promise 探究
简单不简单
11-02 1512
一、Promise 存在的意义   解决代码层次变深后，带来的难以阅读、调试、维护、升级这些难题。 二、JavaScript传统的异步调用是使用回调函数，当我们需要对三个及三个以上的服务器进行调用访问时，如果使用回调函数的方式，那就是一层嵌套一层，最后就不知道嵌套到哪里去了，而且每一层之间如果涉及到参数的传递或者返回值的共享，那可真的是要玩死你 @_@ 。最终结果要不就是写一个几十上百行的一个
AngularJs中promise 和 $q 的一点解释
璟煜de博客
04-17 3139
以前只知道简单的ajax请求，也就是请求回调的模式，看了angularJs中大规模的promise, 尤其是$q 和defer , promise 以及怎么resolve，reject非常疑惑，在搜集了大量的关于promise的资料后大致整理出他们的用途。其实引入promise主要还是为了解决以前的回调过于深入的问题，也就是ajax依赖上次请求返回成功后在执行； functionA(ar
AngularJS 的 Promise
bin1813的博客
09-01 425
了解Promise 在谈论Promise之前我们要了解一下一些额外的知识；我们知道JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务。 这种“单线程”的好处就是实现起来比较简单，容易操作；坏处就是容易造成阻塞，因为队列中如果有一个任务耗时比较长，那么后面的任务都无法快速执行，或导致页
玩转 AngularJS 的 Promise
Skyline
02-03 629
了解Promise 在谈论Promise之前我们要了解一下一些额外的知识；我们知道JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务。 这种“单线程”的好处就是实现起来比较简单，容易操作；坏处就是容易造成阻塞，因为队列中如果有一个任务耗时比较长，那么后面的任务都无法快速执行，
javascript angularjs 使用promise 异步获取数据
Daivon_Up的博客
05-06 2451
javscript promise异步请求数据
AngularJS之$promise
她、她、她的博客
06-13 897
$promise
AngularJS中的promise用法分析
10-19
在Promise中，可以注册当Promise状态发生变化时所要执行的回调函数。 在AngularJS中，使用$q服务来创建和处理Promises。$q服务提供了一系列方法来创建promise对象、解决（resolve）或拒绝（reject）这些promise。$q...
Angularjs Promise实例详解
10-18
Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧
AngularJS中的Promise详细介绍及实例代码
10-20
在AngularJS中，Promise是一种强大的工具，用于处理异步操作，特别是当涉及到与服务器的数据交互时。Promise的主要目的是解决回调地狱问题，通过提供一种更优雅的方式来组织和管理异步流程。 Promise有三种基本状态...
AngularJS中处理多个promise的方式
10-22
在AngularJS中，Promise是处理异步操作的核心概念，它为开发者提供了一种优雅的方式来管理异步流程，尤其是在处理多个并发或序列化的异步任务时。Promise对象代表着一个将来才会有的值，可能是成功的结果，也可能是...
AngularJs在ng-click函数中如何获取代表当前元素的DOM对象
热门推荐
timeless的博客
11-25 3万+
$scope.switchCheckBox = function($event, value) { // console.log(value) if (value) { $($event.target).addClass("checked"); } else { $($event.target).removeClass("chec
AngularJs 失去焦点事件
timeless的博客
10-21 2万+
body {             padding-top:30px;         }                     var app = angular.module('app', []);         app.controller('Ctrl', function ($scope) {             //array of edited f
angularjs指令中的replace与transclude参数
timeless的博客
12-30 1万+
replace, 是否替换掉自定义的指令,　默认是false Element形式                                                                 var app = angular.module('myapp', []);             app.directive('cust',
angularjs折叠菜单
timeless的博客
12-28 9240
var expModule=angular.module('expanderModule',[])             expModule.directive('accordion', function() {                 return {                     restrict : 'EA',                     replac
angularjs指令定义中的ｒｅｑｕｉｒｅ参数
timeless的博客
12-28 8781
require - 请求另外的controller，传入当前directive的link function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀： ? - 不要抛出异常。这使这个依赖变为一个可选项。 ^ - 允许查找父元素的controller
Angularjs 页面切换动画(ui-view)
timeless的博客
01-07 8190
上一篇编辑不了，只能重开一篇。                                                                                 var app = angular.module('myapp', ['ui.router', 'ngAnimate']);             app
AngularJS实战：构建下一代Web应用
7. **服务**：AngularJS的服务如$http用于与服务器进行异步通信，$resource提供了一种更高级的与RESTful API交互的方式，$q用于处理Promise对象等。 8. **测试**：AngularJS支持单元测试和端到端测试，如使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值