AngularJS 中的Promise --- $q服务详解

先说说什么是Promise,什么是$q吧。Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered。

什么是Promise

以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如:

funA(arg1,arg2,function(){
    funcB(arg1,arg2,function(){
        funcC(arg1,arg2,function(){
             xxxx....
        })
    })
})

本身嵌套就已经很不容易理解了,加上不知何时才触发回调,这就相当于雪上加霜了。

但是有了Promise这种规范,它能帮助开发者用同步的方式,编写异步的代码,比如在AngularJS中可以使用这种方式:

deferABC.resolve(xxx)
.then(funcSuccess(){},funcError(){},funcNotify(){});

当resolve内的对象成功执行,就会触发funcSuccess,如果失败就会触发funcError。有点类似

deferABC.resolve(function(){
    Sunccess:funcSuccess,
    error:funcError,
    notify:funcNotify
})

再说的直白点,Promise就是一种对执行结果不确定的一种预先定义,如果成功,就xxxx;如果失败,就xxxx,就像事先给出了一些承诺。

比如,小白在上学时很懒,平时总让舍友带饭,并且事先跟他说好了,如果有韭菜鸡蛋就买这个菜,否则就买西红柿炒鸡蛋;无论买到买不到都要记得带包烟。

小白让舍友带饭()
.then(韭菜鸡蛋,西红柿炒鸡蛋)
.finally(带包烟)

$q服务

q服务是AngularJS中自己封装实现的一种Promise实现,相对与Kris Kwal's Q要轻量级的多。
先介绍一下$q常用的几个方法:

  • defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
  • all() 传入Promise的数组,批量执行,返回一个promise对象
  • when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。

在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。

关于状态有几个规定:

  • 1 状态的变更是不可逆的
  • 2 等待状态可以变成完成或者拒绝

defer()方法

在$q中,可以使用resolve方法,变成完成状态;使用reject方法,变成拒绝状态。

下面看看 $q的简单使用:

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myctrl">
        {{test}}
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
            $scope.test = 1;//这个只是用来测试angularjs是否正常的,没其他的作用

            var defer1 = $q.defer();
            var promise1 = defer1.promise;

            promise1
            .then(function(value){
                console.log("in promise1 ---- success");
                console.log(value);
            },function(value){
                console.log("in promise1 ---- error");
                console.log(value);
            },function(value){
                console.log("in promise1 ---- notify");
                console.log(value);
            })
            .catch(function(e){
                console.log("in promise1 ---- catch");
                console.log(e);
            })
            .finally(function(value){
                console.log('in promise1 ---- finally');
                console.log(value);
            });

            defer1.resolve("hello");
            // defer1.reject("sorry,reject");
         }]);
    </script>
</body>
</html>

其中defer()用于创建一个deferred对象,defer.promise用于返回一个promise对象,来定义then方法。then中有三个参数,分别是成功回调、失败回调、状态变更回调。

其中resolve中传入的变量或者函数返回结果,会当作第一个then方法的参数。then方法会返回一个promise对象,因此可以写成

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

继续说说上面那段代码,then...catch...finally可以想想成java里面的try...catch...finally。

all()方法

这个all()方法,可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。
当批量的执行某些方法时,就可以使用这个方法。

            var funcA = function(){
                console.log("funcA");
                return "hello,funA";
            }
            var funcB = function(){
                console.log("funcB");
                return "hello,funB";
            }
            $q.all([funcA(),funcB()])
            .then(function(result){
                console.log(result);
            });

执行的结果:

funcA
funcB
Array [ "hello,funA", "hello,funB" ] 

when()方法

when方法中可以传入一个参数,这个参数可能是一个值,可能是一个符合promise标准的外部对象。

            var funcA = function(){
                console.log("funcA");
                return "hello,funA";
            }
            $q.when(funcA())
            .then(function(result){
                console.log(result);
            });

当传入的参数不确定时,可以使用这个方法。

hello,funA

本文转自博客园xingoo的博客,原文链接:AngularJS 中的Promise --- $q服务详解,如需转载请自行联系原博主。

时间: 2024-10-24 03:12:46

AngularJS 中的Promise --- $q服务详解的相关文章

AngularJS 中的Promise --- $q服务详解_AngularJS

先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如: funA(arg1,arg2,function(){ funcB(arg1,arg2,function(){ funcC(arg1,arg2,function(){ xxxx.... })

Android中Service(后台服务)详解

  这篇文章主要介绍了Android中Service(后台服务)详解,本文讲解了Service的概念.作用.生命周期.启动方式和代码实例等内容,需要的朋友可以参考下 1.概念: (1).Service可以说是一个在后台运行的Activity.它不是一个单独的进程,它只需要应用告诉它要在后台做什么就可以了. (2).它要是实现和用户的交互的话需要通过通知栏或者是通过发送广播,UI去接收显示. (3).它的应用十分广泛,尤其是在框架层,应用更多的是对系统服务的调用. 2.作用: (1).它用于处理一

AngularJS入门教程之双向绑定详解_AngularJS

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

CentOS启动和停止服务详解

  CentOS启动和停止服务详解            服务简介 Linux 系统服务是在Linux启 动时自动加载,并在Linux退出时自动停止的系统任务.在Linux 启动过程中,我们可以看得很多"starting - "提示信息,该信息表示正在启动系统服务;而在Linux 退出时,我们也能够看到相应的"Stopping - "信息,表示系统服务正在停止.Linux自身有许多系统任务,如"network" 服务用于支持网络连接等.CAMS

Node.js编程中客户端Session的使用详解

  这篇文章主要介绍了Node.js编程中客户端Session的使用详解,是Node.js入门学习中的基础知识,需要的朋友可以参考下 静态网站很容易扩展.你只需要全部缓存,不需要考虑从不同服务器组合有状态的内容给用户. 可惜,大多数Web应用使用有状态的内容提供个性化体验.如果你的应用可以登录,就需要记住用户的Session.经典的处理方法是客户端设置包含随机唯一Session标识的Cookie,被标识的Session数据保存到服务端. 扩展有状态服务 当扩展服务的时候,你肯定有三种选择: 不同

AngularJS入门教程之表格实例详解_AngularJS

AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&g

Python中的深拷贝和浅拷贝详解

  这篇文章主要介绍了Python中的深拷贝和浅拷贝详解,本文讲解了变量-对象-引用.可变对象-不可变对象.拷贝等内容,需要的朋友可以参考下 要说清楚Python中的深浅拷贝,需要搞清楚下面一系列概念: 变量-引用-对象(可变对象,不可变对象)-切片-拷贝(浅拷贝,深拷贝) [变量-对象-引用] 在Python中一切都是对象,比如说:3, 3.14, 'Hello', [1,2,3,4],{'a':1}...... 甚至连type其本身都是对象,type对象 Python中变量与C/C++/Ja

Python中的推导式使用详解

  这篇文章主要介绍了Python中的推导式使用详解,本文分别讲解了列表推导式.字典推导式.集合推导式使用实例,需要的朋友可以参考下 推导式是Python中很强大的.很受欢迎的特性,具有语言简洁,速度快等优点.推导式包括: 1.列表推导式 2.字典推导式 3.集合推导式 嵌套列表推导式 NOTE: 字典和集合推导是最近才加入到Python的(Python 2.7 和Python 3.1以上版). 下面简要介绍下: [列表推导式] 列表推导能非常简洁的构造一个新列表:只用一条简洁的表达式即可对得到

MySQL中的RAND()函数使用详解

  这篇文章主要介绍了MySQL中的RAND()函数使用详解,是MySQL入门学习中的基础知识,需要的朋友可以参考下 MySQL RAND()函数调用可以在0和1之间产生一个随机数: ? 1 2 3 4 5 6 7 mysql> SELECT RAND( ), RAND( ), RAND( ); +------------------+-----------------+------------------+ | RAND( ) | RAND( ) | RAND( ) | +----------