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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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代码重构工具推荐
2014/10/14 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python 实现链表实例代码
2017/04/07 Python
Python如何生成树形图案
2018/01/03 Python
Python全栈之列表数据类型详解
2019/10/01 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python 解析简单的XML数据
2020/07/24 Python
Python 随机按键模拟2小时
2020/12/30 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
社区包粽子活动方案
2014/01/21 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
护士求职信
2014/07/05 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
Python jiaba库的使用详解
2021/11/23 Python