$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. PHPUnit 手册

    PHPUnit 手册 Sebastian Bergmann 版权 © 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015 ...

  2. mysql有多条记录的单个字段想存为一个字段显示的方法

    SELECT po.id,(SELECT GROUP_CONCAT(mr.member_type) as memberTypeList FROM prod_offer_member_rel mr WH ...

  3. Spring MVC 原理

    一.什么是springmvc springMVC是spring框架的一个模块,springMVC和spring无需通过中间整合层进行开发. springMVC是一个基于mvc的web框架. Sprin ...

  4. Shell 编程入门

    首先创建一个文件: 在终端中输入如下命令: vi helloworld.sh 然后按i进行命令编写 下面这句话是必须写的 #!/bin/sh这句话是必须写的 #!/bin/sh a="hel ...

  5. 对网站视频资源的管控-禁止通过视频的url访问视频

    一般静态文件的下载是不经过PHP的,直接由web服务器发送到客户端.但有时候需要实现文件下载的权限控制等功能,这时候就需要经由PHP程序来做权限验证.简单粗暴的做法是,在PHP程序里边先验证权限,验证 ...

  6. PHP函数register_shutdown_function的用法

    register_shutdown_function这个函数是在PHP程序运行结束之前调用的,用这个函数可以做很多,比如调用运行发生致命错误中止的原因,或者调试程序的执行时间等. PHP终止的情况有哪 ...

  7. 转： JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  8. linux redis基础应用 主从服务器配置

    Redis基础应用 redis是一个开源的可基于内存可持久化的日志型,key-value数据库redis的存储分为内存存储,磁盘存储和log文件三部分配置文件中有三个参数对其进行配置 优势:和memc ...

  9. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  10. SAS 9.4 的sid问题解决方案汇总（头疼...）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 因为经常出现sid出现问题,所以问题很多.最常 ...