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的详细使用方法网上的有很多教程。我也是刚接触。讲不好,不敢乱讲。上面的代码是我按我的理解写的,经过了测试没有问题。

相关文章

  • Angular实现svg和png图片下载实现

    Angular实现svg和png图片下载实现

    这篇文章主要介绍了Angular实现svg和png图片下载实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • AngularJS递归指令实现Tree View效果示例

    AngularJS递归指令实现Tree View效果示例

    这篇文章主要介绍了AngularJS递归指令实现Tree View效果,结合实例形式分析了AngularJS基于递归指令实现树形结构层次数据的相关操作步骤与注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular2.js实现表单验证详解

    Angular2.js实现表单验证详解

    这篇文章主要介绍了Angular2.js实现表单验证的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Angular 5.x 学习笔记之Router(路由)应用

    Angular 5.x 学习笔记之Router(路由)应用

    本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular 多模块项目构建过程

    Angular 多模块项目构建过程

    这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • AngularJS ng-bind-template 指令详解

    AngularJS ng-bind-template 指令详解

    本文注意介绍AngularJS ng-bind-template 指令,这里把相关资料整理了一下,并附实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
    2017-07-07
  • Angular 独立组件入门指南

    Angular 独立组件入门指南

    这篇文章主要为大家介绍了Angular 独立组件入门教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Angular 封装并发布组件的方法示例

    Angular 封装并发布组件的方法示例

    本篇文章主要介绍了Angular 封装并发布组件的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 解决Angular2 router.navigate刷新页面的问题

    解决Angular2 router.navigate刷新页面的问题

    今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论