$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. js之构造函数的理解

    在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式.对象字面量是一种灵活方便的书写方式,例如:   1 2 3 4 5 6 var o1 = {     p:”I’m in ...

  2. Simplifying Conditional Expressions(简化条件表达式)

    1.Decompose Conditional(分解条件表达式) 2.Consolidate Conditional Expressions(合并条件表达式) 3.Consolidate Duplic ...

  3. GitLab-CI部署及踩坑总结

    转载请注明出处:https://www.cnblogs.com/shining5/p/8863063.html 部署GitLab-CI 简介 GitLab_CI(gitlab continuous i ...

  4. [工具] Docker安装及portainer GUI

    一.Docker Engine安装 1.安装流程 1)移除旧版本(如果有旧版本) yum remove docker \ docker-client \ docker-client-latest \ ...

  5. Java入门教程二(语言基础)

    常量与变量 常量值又称为字面常量,它是通过数据直接表示 常量 实型常量值 Java 的实型常量值主要有如下两种形式 十进制数形式:由数字和小数点组成,且必须有小数点,如 12.34.-98.0 科学记 ...

  6. session和el表达式

    2015/1/21 ## 回顾昨天案例 ## # 模拟购物车: >> 基本步骤: |-- 显示所有的书籍: |-- 制作书记列表/模仿数据库: |-- 参见昨天示例: |-- 制作查看详情 ...

  7. 使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置，支持ES6/Less

    之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...

  8. 【30分钟学完】canvas动画|游戏基础(4)：边界与碰撞

    前言 本系列前几篇中常出现物体跑到画布外的情况,本篇就是为了解决这个问题. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 越界检测 假定物体是个圆形,如图其圆心坐标即是物 ...

  9. localstorage浏览器储存

    需求 a.html页面生成订单信息,b.html中调用. 通过不操作数据库,直接在浏览器自带的数据库中进行操作,当然主要是对Json数据的操作. a.html代码部分: <!--html--&g ...

  10. 一起了解 .Net Foundation 项目 No.17

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Peachpie Comp ...