$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. angular-file-upload封装为指令+图片尺寸限制

    不了解angular-file-upload基础使用 请先参考http://blog.csdn.net/lai_xu/article/details/49535847 博客地址 下文如果有更好的建议请 ...

  2. JavaScript 常用单词整理

    JS单词 push :添加一个数组元素 document :文档 pop :删除最后一个数组元素 console :控制台 shift :删除第一个数组元素 string :字符串 Concat 组合 ...

  3. Java 面向对象三大特征之一： 多态

    多态与类型转换 子类重写父类方法 1)位置:子类和父类中有同名的方法 2)方法名相同,返回类型和修饰符相同,参数列表相同       方法体不同 多态的优势和应用场合 多态:同一个引用类型,使用不同的 ...

  4. ASP.NET Core 使用 URL Rewrite 中间件实现 HTTP 重定向到 HTTPS

    在传统 ASP.NET 程序中,我们可以通过配置 IIS 的“URL 重写”功能实现将 HTTP 请求重定向为 HTTPS .但是该方法在 ASP.NET Core 应用中不再工作.在 ASP.NET ...

  5. 解决 java.lang.ClassNotFoundException: org.springframework.beans.factory.config.EmbeddedValueResolver

    1.今天用maven配置了一下dubbo的项目发现启动项目后意外报错: java.lang.ClassNotFoundException: org.springframework.beans.fact ...

  6. 傅里叶变换 - Fourier Transform

    傅里叶级数 傅里叶在他的专著<热的解析理论>中提出,任何一个周期函数都可以表示为若干个正弦函数的和,即: \[f(t)=a_0+\sum_{n=1}^{\infty}(a_ncos(n\o ...

  7. 谈一谈Java中的Error和Exception

    Error和Exception的联系 继承结构:Error和Exception都是继承于Throwable,RuntimeException继承自Exception. Error和RuntimeExc ...

  8. 在页面加载后在设置embed 的src 怎么实现？

    我想在页面加载完之后,再给embed 加入src 值,但embed 后播放不了.下面是我的两个方案,都无法播放,求解: <script type="text/javascript&qu ...

  9. Win10电脑经常自动掉线、自动断网的解决方法

    近期一客户称自己使用电脑上网的时候,过一段时间莫名其妙的出现自动掉线.自动断网的情况,那么遇到这个问题该怎么办?下面装机之家分享一下Win10电脑经常自动掉线.自动断网的解决方法,以Win7系统为例. ...

  10. CEPH s3 java sdk PUT对象并在同一个PUT请求中同时设置ACL为 Public

    java: http://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/acl-using-java-sdk.html tring bucketName ...