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判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 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模板页面中分页代码的解析
2009/02/06 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python中type的构造函数参数含义说明
2015/06/21 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
政风行风建设责任书
2014/07/23 职场文书
南极大冒险观后感
2015/06/05 职场文书
小学运动会加油词
2015/07/18 职场文书