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 相关文章推荐
详解jquery uploadify 上传文件
Nov 09 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
vue transition 在子组件中失效的解决
Nov 12 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php中使用sftp教程
2015/03/30 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
详解supervisor使用教程
2017/11/21 Python
基于python指定包的安装路径方法
2018/10/27 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python pygame实现方向键控制小球
2019/05/17 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Python进行统计建模
2020/08/10 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
圣诞节红领巾广播稿
2014/02/03 职场文书
疾病捐款倡议书
2014/05/13 职场文书
2016年春节慰问信息
2015/03/25 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS