$q的基本用法

  1. function fn() {
  2. var defer = $q.defer();
  3. setTimeout(function () {
  4. console.log(1);
  5. defer.resolve(6);
  6. }, 2000);
  7. return defer.promise;
  8. }
  9.  
  10. fn().then(function (data) {
  11. console.log(data); //2000ms后打印6
  12. }).catch(function (err) {
  13. console.error(err);
  14. });
  15. //或者用$q.when(fn()), 和上面是同样的效果
  16. $q.when(fn()).then(function (data) {
  17. console.log(data);
  18. }).catch(function (err) {
  19. console.error(err);
  20. });

$q多个promise串行

  1. function f1() {
  2. var defer = $q.defer();
  3. setTimeout(function() {
  4. defer.resolve(1);
  5. }, 2000);
  6. return defer.promise;
  7. }
  8.  
  9. function f2() {
  10. var defer = $q.defer();
  11. setTimeout(function() {
  12. defer.resolve(2);
  13. }, 2000);
  14. return defer.promise;
  15. }
  16.  
  17. function f3() {
  18. var defer = $q.defer();
  19. setTimeout(function() {
  20. defer.resolve(3);
  21. }, 2000);
  22. return defer.promise;
  23. }
  24.  
  25. //f1进行完,在进行f2,然后进行f3,后一个程序等待前一个完成
  26. f1().then(function (data) {
  27. console.log(data); // 2s后打印1
  28. return f2();
  29. }).then(function (data) {
  30. console.log(data); // 再过2s后打印2
  31. return f3();
  32. }).then(function (data) {
  33. console.log(data);  // 再过2s后打印3
  34. });

$q.all

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

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

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

  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <title></title>
  5. <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-controller="ctrl1">
  9. </div>
  10. <script>
  11. var app = angular.module('app',[]);
  12. app.controller('ctrl1',['$scope','$q',function($scope,$q){
  13. var deferA = $q.defer();
  14. setTimeout(function(){
  15. deferA.resolve('this is DATA A')
  16. },500);
  17. var deferB = $q.defer();
  18. setTimeout(function(){
  19. deferB.resolve('this is DATA B');
  20. },1000);
  21. var p=$q.all({
  22. dataA:deferA.promise,
  23. dataB:deferB.promise
  24. })
  25. p.then(function(result){
  26. console.log(result.dataA); // this is DATA A
  27. console.log(result.dataB); // this is DATA B
  28. })
  29. .catch(function(error){
  30. console.error(error);
  31. })
  32. }])
  33.  
  34. </script>
  35. </body>
  36. </html>

例2:接受一个promise数组:

  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <title></title>
  5. <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-controller="ctrl1">
  9. </div>
  10. <script>
  11. var app = angular.module('app',[]);
  12. app.controller('ctrl1',['$scope','$q',function($scope,$q){
  13. var deferA = $q.defer();
  14. setTimeout(function(){
  15. deferA.resolve('this is DATA A')
  16. },500);
  17. var deferB = $q.defer();
  18. setTimeout(function(){
  19. deferB.resolve('this is DATA B');
  20. },1000);
  21. var p=$q.all([
  22. deferA.promise,
  23. deferB.promise
  24. ]);
  25. p.then(function(result){
  26. console.log(result[0]); // this is DATA A
  27. console.log(result[1]); // this is DATA B
  28. })
  29. .catch(function(error){
  30. console.error(error);
  31. })
  32. }])
  33.  
  34. </script>
  35. </body>
  36. </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. The difference between applicationContext.xml in Spring and xxx-servlet.xml in SpringMVC

    一直搞不明白两者的区别.如果使用了SpringMVC,事实上,bean的配置完全可以在xxx-servlet.xml中进行配置.为什么需要applicationContext.xml?一定必须? 因为 ...

  2. Simpo

    Time: 2017-01-16 - Download Github: https://github.com/KeliCheng/Simpo一款快速发布文字和图片到社交网站的macOS菜单栏App,目 ...

  3. 1、【Spark】Spark安装

    本文基于的环境 Red Hat Linux Enterprise 7 x86_64 jdk 1.7.0_79 Python 2.7Spart spark-1.5.2-bin-hadoop2.6 官方要 ...

  4. Web渗透基础小总结

    Web渗透框架概述 主要组成: 1. web语言代码(脚本) 2. web程序 3. 数据库程序 Web语言常见几大类 1. HTML:超文本标记语言,标准通用编辑语言下的一个应用 2. PHP:超文 ...

  5. php-fpm启动失败处理

    报错信息: No pool defined. at least one pool section must be specified in config file [11-Mar-2019 23:57 ...

  6. Python 存储数据到json文件

    1 前言 很多程序都要求用户输入某种信息,程序一般将信息存储在列表和字典等数据结构中. 用户关闭程序时,就需要将信息进行保存,一种简单的方式是使用模块json来存储数据. 模块json让你能够将简单的 ...

  7. 关于使用Binlog和canal来对MySQL的数据写入进行监控

    先说下Binlog和canal是什么吧. 1.Binlog是mysql数据库的操作日志,当有发生增删改查操作时,就会在data目录下生成一个log文件,形如mysql-bin.000001,mysql ...

  8. vue项目基本步骤

    首先查看电脑是否已经安装vue并查看版本: window+R快捷打开命令行,cmd,输入node -v回车 如果未安装操作步骤如下: 1:$ cnpm install vue(新电脑安装Vue,永久) ...

  9. 如何学习kafka?

      本文是我学习kafka的一个思路和总结,希望对刚接触kafka的你有所帮助.在学习kafka之前,最好能对kafka有一个简单的了解,可以提出一些问题,带着问题去学习,就会容易一些. 0 什么是k ...

  10. 爬虫之requestsku

    想用selenium实现B站自动登录已经点赞等功能,看到如何解决滑动解锁有关爬虫的内容,便开始学习爬虫,没过多久又想把记录自己生活的网站做起来,朋友便推荐了layui框架倒腾了一晚上自我觉得是做后台系 ...