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中实现命名空间
Nov 23 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
详解vue路由
Aug 05 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
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php实现websocket实时消息推送
2018/03/30 PHP
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python操作gmail实例
2015/01/14 Python
python提取页面内url列表的方法
2015/05/25 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python如何将图片转换素描画
2020/09/08 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
公司面试感谢信
2014/02/01 职场文书
商铺租赁意向书
2014/04/01 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
室内趣味活动方案
2014/08/24 职场文书
房贷收入证明范本
2015/06/12 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android