$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用法, $q多个promise串行/同步/等待）， $q.all用法,使用的更多相关文章

  1. 任意promise串行执行算法 - 童彪

      // 任意promise串行执行算法 - 童彪 function runAllPromise() { var p1 = new Promise((resove, reject) => { s ...

  2. Promise的并行和串行

    Promise 并行 这个功能Promise自身已经提供,不是本文的重点.主要是依赖Promise.all和Promise.race. Promise.all是所有的Promise执行完毕后(reje ...

  3. 设 $y_1(x), y_2(x)$ 是 $y''+p(x)y'+q(x)y=0$ 的两个解 ($p(x), q(x)$ 连续), 且 $y_1(x_0)=y_2(x_0)=0$, $y_1(x)\not\equiv 0$. 试证: $y_1(x)$, $y_2(x)$ 线性相关.

    设 $y_1(x), y_2(x)$ 是 $y''+p(x)y'+q(x)y=0$ 的两个解 ($p(x), q(x)$ 连续), 且 $y_1(x_0)=y_2(x_0)=0$, $y_1(x)\n ...

  4. vue使用技巧：Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  5. JavaScript 循环数组的时候调用方法中包含Promise的时候如何做到串行

    forEach是不能阻塞的, 默认[并行]方式 const list = [1, 2, 3] const square = num => { return new Promise((resolv ...

  6. promise在angular中的基本使用

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

  7. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  8. Miniprofiler在swagger、vue、angular中的使用

     本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...

  9. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

随机推荐

  1. TCP传输连接管理

    TCP传输连接管理 一.传输连接的三个阶段 1.1.概述 传输连接就有三个阶段,即:连接建立.数据传送和连接释放. 连接建立过程中要解决以下三个问题: 要使每一方能够确知对方的存在. 要允许双方协商一 ...

  2. ES6 常用知识点总结

    ES6常用知识总结 之前总结了es5中js的一些知识点.这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家.内容还是es6主要的知识点,基本没有 ...

  3. 2017、2018面试分享（js面试题记录）记得点赞分享哦；让更多的人看到~~

    2017面试分享(js面试题记录) 1. 最简单的一道题 '11' * 2 'a8' * 3 var a = 2, b = 3; var c = a+++b; // c = 5 2. 一道this的问 ...

  4. ABP开发框架前后端开发系列---（16）ABP框架升级最新版本的经验总结

    有一小段时间没有持续升级ABP框架了,最近就因应客户的需要,把ABP框架进行全面的更新,由于我们应用的ABP框架,基础部分还是会使用官方的内容,因此升级的时候需要把官方基础ABP的DLL进行全面的更新 ...

  5. 2019年最新老男孩高性能Web架构与自动化运维架构视频教程

    课程目录L001-老男孩架构15期-Web架构之单机时代L002-老男孩架构15期-Web架构之集群时代L003-老男孩架构15期-Web架构之dnsL004-老男孩架构15期-Web架构之缓存体系L ...

  6. Python 获取MySql某个表所有字段名

    在使用python导出数据库中数据的时候,往往除了插入的数据以外,还有表字段等信息需要导出,查阅了资料后发现了2种方法 第一种:在mysql自带的表里查询,这个表保存了每张表的字段信息,可以用pymy ...

  7. Centos 安装rabbitmq

    此处是通过源码进行安装的rabbitmq,参考:http://www.cnblogs.com/huangxincheng/p/6006569.html 1.源码包下载 ① erlang : http: ...

  8. Hadoop fs 基础命令

    操作hdfs的基本命令 在hdfs中,路径需要用绝对路径 1. 查看根目录 hadoop fs -ls / 2. 递归查看所有文件和文件夹 -lsr等同于-ls -R hadoop fs -lsr / ...

  9. Java原来还可以这么学：如何搞定面试中必考的集合类

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...

  10. 【S2-053】Struts2远程命令执行漏洞（CVE-2017-12611）

    继S2-052之后,Apache Struts 2再次被曝存在远程代码执行漏洞,漏洞编号S2-053,CVE编号CVE-2017-1000112. 当开发人员在Freemarker标签中使用错误的构造 ...