angularjs 处理多个异步请求方法汇总


Posted in Javascript onJanuary 06, 2015

在实际业务中经常需要等待几个请求完成后再进行下一步操作。但angularjs中$http不支持同步的请求。

解决方法一:

$http.get('url1').success(function (d1) {

        $http.get('url2').success(function (d2) {

            //处理逻辑

        });

    });

解决方法二:

then中的方法会按顺序执行。

var app = angular.module('app',[]);

app.controller('promiseControl',function($scope,$q,$http) {

    function getJson(url){

        var deferred = $q.defer();

        $http.get(url)

            .success(function(d){

                d = parseInt(d);

                console.log(d);

                deferred.resolve(d);

            });

        return deferred.promise;

    }
    getJson('json1.txt').then(function(){

        return getJson('json2.txt');

    }).then(function(){

        return getJson('json1.txt');

    }).then(function(){

        return getJson('json2.txt');

    }).then(function(d){

        console.log('end');

    });

});

解决方法三:

$q.all方法第一个参数可以是数组(对象)。在第一参数中内容都执行完后就会执行then中方法。第一个参数的方法的所有返回值会以数组(对象)的形式传入。

var app = angular.module('app',[]);

app.controller('promiseControl',function($scope,$q,$http) {

    $q.all({first: $http.get('json1.txt'),second: $http.get('json2.txt')}).then(function(arr){

        console.log(arr);

        angular.forEach(arr,function(d){

            console.log(d);

            console.log(d.data);

        })

    });

});

$q的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。

Javascript 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
localStorage实现便签小程序
Nov 28 Javascript
详解AngularJS controller调用factory
May 19 Javascript
JS实现瀑布流布局
Oct 21 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
使用JS来动态操作css的几种方法
Dec 18 Javascript
json实现前后台的相互传值详解
Jan 05 #Javascript
jQuery中eq()方法用法实例
Jan 05 #Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 #Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
jQuery中addClass()方法用法实例
Jan 05 #Javascript
js Calender控件使用详解
Jan 05 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
短信提示使用 特效
2007/01/19 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
javascript数组的使用
2013/03/28 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python入门之modf()方法的使用
2015/05/15 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python正则表达式学习小例子
2020/03/03 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
合作意向书格式及范文
2014/03/31 职场文书
财产公证书样本
2014/04/04 职场文书
某某同志考察材料
2014/05/28 职场文书
英语专业求职信
2014/07/08 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Python利用zhdate模块实现农历日期处理
2022/03/31 Python