angularjs 处理多个异步请求方法汇总  更新时间:2015年01月06日 08:59:51   投稿:hebedich   这篇文章主要介绍了angularjs 处理多个异步请求方法汇总,需要的朋友可以参考下 在实际业务中经常需要等待几个请求完成后再进行下一步操作。但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的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。 您可能感兴趣的文章: Node.js模拟发起http请求从异步转同步的5种用法 原生JavaScript实现Ajax异步请求 JavaScript利用fetch实现异步请求的方法实例 原生JS发送异步数据请求 详解Vuejs2.0之异步跨域请求 SpringMVC环境下实现的Ajax异步请求JSON格式数据 jquery的ajax异步请求接收返回json数据实例 JS多个异步请求 按顺序执行next实现解析 angularjs 异步请求 相关文章 详解AngularJS controller调用factory 本篇文章主要介绍了详解AngularJS controller调用factory,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 AngularJS实现表单验证功能详解 这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 Angularjs 实现一个幻灯片示例代码 本文主要介绍Angularjs 写一个幻灯片的知识,这里整理了详细的资料,及实现代码和实现效果图有需要的小伙伴可以参考下 2016-09-09 详解angularjs实现echart图表效果最简洁教程 本篇文章主要介绍了详解angularjs实现echart图表效果最简洁教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 浅谈angular懒加载的一些坑 下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-08-08 angularjs 中$apply,$digest,$watch详解 这篇文章主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下 2016-10-10 Angular6 Filter实现页面搜索的示例代码 这篇文章主要介绍了Angular6 Filter实现页面搜索的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 详解AngularJS中的依赖注入机制 这篇文章主要介绍了详解AngularJS中的依赖注入机制,对JavaScript各组件的使用起到非常重要的作用,需要的朋友可以参考下 2015-06-06 详谈Angular 2+ 的表单(一)之模板驱动型表单 这篇文章主要介绍了Angular 2+ 的表单(一)之模板驱动型表单,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-04-04 Angular 利用路由跳转到指定页面的指定位置方法 今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 最新评论

在实际业务中经常需要等待几个请求完成后再进行下一步操作。但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的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。

您可能感兴趣的文章:

  • Node.js模拟发起http请求从异步转同步的5种用法
  • 原生JavaScript实现Ajax异步请求
  • JavaScript利用fetch实现异步请求的方法实例
  • 原生JS发送异步数据请求
  • 详解Vuejs2.0之异步跨域请求
  • SpringMVC环境下实现的Ajax异步请求JSON格式数据
  • jquery的ajax异步请求接收返回json数据实例
  • JS多个异步请求 按顺序执行next实现解析
张贴在3