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中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
jQuery.each使用详解
Jul 07 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue-video-player 断点续播的实现
Feb 01 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JS动画效果代码3
2008/04/03 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python grpc超时机制代码示例
2020/09/14 Python
python中os.remove()用法及注意事项
2021/01/31 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
《三峡》教学反思
2014/03/01 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL