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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
React Component存在的几种形式详解
Nov 06 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
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
asp批量修改记录的代码
2008/06/25 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
JS高级运动实例分析
2016/12/20 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
vue.js中created方法作用
2018/03/30 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
总经理工作职责范文
2014/03/14 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书