$q的基本用法

function fn() {

    var defer = $q.defer();

    setTimeout(function () {

        console.log(1);

        defer.resolve(6);

    }, 2000);

    return defer.promise;

}

fn().then(function (data) {

    console.log(data); //2000ms后打印6

}).catch(function (err) {

    console.error(err);

});

//或者用$q.when(fn()), 和上面是同样的效果

$q.when(fn()).then(function (data) {

    console.log(data);

}).catch(function (err) {

    console.error(err);

});

$q多个promise串行

function f1() {

    var defer = $q.defer();

   setTimeout(function() {

       defer.resolve(1);

   }, 2000);

   return defer.promise;

}

function f2() {

    var defer = $q.defer();

    setTimeout(function() {

        defer.resolve(2);

    }, 2000);

    return defer.promise;

}

function f3() {

    var defer = $q.defer();

    setTimeout(function() {

        defer.resolve(3);

    }, 2000);

    return defer.promise;

}

//f1进行完，在进行f2，然后进行f3，后一个程序等待前一个完成

f1().then(function (data) {

    console.log(data);  // 2s后打印1

    return f2();

}).then(function (data) {

    console.log(data);   // 再过2s后打印2

    return f3();

}).then(function (data) {

    console.log(data);　　// 再过2s后打印3

});

$q.all

$q.all是用于执行多个异步任务进行回调，它可以接受一个promise的数组，或是promise的hash(object)。任何一个promise失败，都会导致整个任务的失败。

$q.all中接收多个promise是同时进行的。

例1：接受一个promise的hash(object)：

<!DOCTYPE html>

<html ng-app="app">

<head>

  <title></title>

  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

</head>

<body>

  <div ng-controller="ctrl1">

  </div>

  <script>

    var app = angular.module('app',[]);

    app.controller('ctrl1',['$scope','$q',function($scope,$q){

      var deferA = $q.defer();

      setTimeout(function(){

        deferA.resolve('this is DATA A')

      },500);

      var deferB = $q.defer();

      setTimeout(function(){

        deferB.resolve('this is DATA B');

      },1000);

      var p=$q.all({

        dataA:deferA.promise,

        dataB:deferB.promise

      })

      p.then(function(result){

        console.log(result.dataA); // this is DATA A

        console.log(result.dataB); // this is DATA B

      })

      .catch(function(error){

        console.error(error);

      })

    }])

  </script>

</body>

</html>

例2：接受一个promise数组：

<!DOCTYPE html>

<html ng-app="app">

<head>

  <title></title>

  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

</head>

<body>

  <div ng-controller="ctrl1">

  </div>

  <script>

    var app = angular.module('app',[]);

    app.controller('ctrl1',['$scope','$q',function($scope,$q){

      var deferA = $q.defer();

      setTimeout(function(){

        deferA.resolve('this is DATA A')

      },500);

      var deferB = $q.defer();

      setTimeout(function(){

        deferB.resolve('this is DATA B');

      },1000);

      var p=$q.all([

        deferA.promise,

        deferB.promise

      ]);

      p.then(function(result){

        console.log(result[0]); // this is DATA A

        console.log(result[1]); // this is DATA B

      })

      .catch(function(error){

        console.error(error);

      })

    }])

  </script>

</body>

</html>

参考：http://blog.csdn.net/shidaping/article/details/52398925

angular中$q.all用法的更多相关文章

  1. angular promise $q 异步调用

    Angular异步调用 Promise和$q的用法 背景 首先说明一下promise异步调用出现的背景: javascript语言是一种单线程模式,就是说一次只能够执行一个任务,如果有多个任务的话就必 ...

  2. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  3. angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用

    $q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...

  4. Angular JS中 Promise用法

    一.Promise形象讲解A promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多.promise全称是 Futures and promises. 而在j ...

  5. angular的$q服务和promise模式

    此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...

  6. Angular通信$q服务和promise对象

    promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...

  7. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

  8. promise在angular中的基本使用

    promise在angular中的基本使用 <!DOCTYPE html> <html ng-app="myApp"> <head> <m ...

  9. angular的$q,defer,promise

    $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 官网:http://docs.angularjs.cn/api/ng/servi ...

随机推荐

  1. 微信小程序AES加密解密

    微信小程序  其实在调用一些第三方 js的时候 其实没有大家想的那么复杂,无非就是把原生js调用方式   改为微信小程序 js调用方式 废话不多说直接贴代码 其实就是将原生function 或者 对象 ...

  2. Python自动化--语言基础7--操作日志、加密、发送邮件、线程、生产者消费者

    1.操作日志 logging.basicConfig:日志的统一处理器,对日志的输出格式和方式做配置日志级别等级CRITICAL > ERROR > WARNING > INFO & ...

  3. java学习笔记(详细)

    java平台 1.J2SE java开发平台标准版 2.J2EE java开发平台企业版 java程序需要在虚拟机上才可以运行,换言之只要有虚拟机的系统都可以运行java程序.不同系统上要安装对应的虚 ...

  4. 老男孩Python全栈开发（92天全）视频教程 自学笔记07

    day7课程内容: Python的编码解码 二进制 --->ASCII:只能存英文和拉丁字符,一个字符占一个字节,8位 ------->gb2312:只能6700多个中文,1980年 -- ...

  5. String、StringBuffer、与StringBuilder的区别

    转载自博客园,原文链接:String.StringBuffer.与StringBuilder的区别 相信大家都知道StringBuffer.StringBuilder,但是这两个的用法都差不多,到底有 ...

  6. CompletableFuture CompletableFuture.supplyAsync 异常处理

    CompletableFuture 异常处理completeExceptionally可以把异常抛到主线程 /** * User: laizhenwei * Date: 2018-01-30 Time ...

  7. Centos小白命令

    centos在登录界面无法输入密码 Centos安装flash插件 Centos挂载windows ntfs分区 Centos搭建Eclipse C/C++环境 windows下的txt文件在cent ...

  8. linux rsync实时同步

    rsync同步 同步与复制的差异:复制:完全拷贝源到目标同步:增量拷贝,只传输变化过的数据 同步操作:remote sync 远程同步支持本地复制,或与其他ssh,rsync主机同步.官方网站:htt ...

  9. DOS下串口通信程序来传送文件的源代码

    接收程序: #include <dos.h>#include <fstream.h>#include <conio.h>#include <stdio.h&g ...

  10. JAVA代码发送邮件示例和解释(二)

    之前有使用过一次在程序中发邮件的功能,也写了一篇相关的笔记,当时使用的是163邮箱,经过测试多个163账号都是可行的.但是最近把账号换成中国移动@chinamobilesz.com这种结尾的时候,却一 ...