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函数般调用正则
Apr 08 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
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数组的一些常见操作汇总
2011/07/17 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php动态变量定义及使用
2015/06/10 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
python aiohttp的使用详解
2019/06/20 Python
python计算导数并绘图的实例
2020/02/29 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
公司捐款倡议书
2014/05/14 职场文书
创业计划书之美甲店
2019/09/20 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers