angular中处理多个异步请求的方法汇总

在实际业务中经常需要等待几个请求完成后再进行下一步操作。但angularjs中$http不支持同步的请求。

解决方法一:

$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);  

        })  

    });  

});  
时间: 2024-11-04 22:04:39

angular中处理多个异步请求的方法汇总的相关文章

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求 最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

angular 中父组件调用子组件的方法

angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 中使用 #var 方式标记 子组件 <div style="border: 1px solid red"> <p>子组件:</p>> <ap

编程中遇到的Python错误和解决方法汇总整理

这篇文章主要介绍了自己编程中遇到的Python错误和解决方法汇总整理,本文收集整理了较多的案例,需要的朋友可以参考下 开个贴,用于记录平时经常碰到的Python的错误同时对导致错误的原因进行分析,并持续更新,方便以后查询,学习.知识在于积累嘛!微笑+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++错误: 复制代码代码如下: >>> def f(x, y):      print x, y  >>> t

angular 中使用 axios 发起 http 请求

angular 中使用 axios /** * 在angular 中引入第三方 http 模块的使用, 以 axios 为例 * 有两种使用方法:(本文使用Promise简单封装) * 一. 直接在要使用请求的组件中 import axios from 'axios', 调用: axios.get/ axios.post ... * 二. 封装成服务: *          1. 引入 axios: import axios from 'axios' *          2. 用 promis

JAVA 中URL中文参数乱码的处理方法(汇总)

解决输入的全角汉字或者日文在URl中乱码的问题.以下我的实现 JS代码: function shiborikomuFw() {     var url = '${url08}';     var str = document.getElementsByName('fw');     //Str str = document.getElementsById('fw').Value;     for (var i = 0; i < str.length; i++) {     url = url +

vue中使用axios(异步请求)和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

Angular中使用Swiper不能滑动的解决方法

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成n个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <div class="swiper-slide"

Angular中使用Swiper不能滑动的解决方法。

今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成n个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <div class="swiper-slide" ng-repeat="result in mediaList">

Windows Phone8.1中SD卡文件的读取写入方法汇总

起初我想从SD卡上读取文件可以从两个方面着手吧: 1.通过文件选择器FileOpenPicker,来逐层到手机找到需要读取的文件,然后点击直接读取显示内容 2.直接到SD卡中读取文件 第一种方法逻辑有些复杂,设计到应用暂时的挂起和恢复,这篇博客不深究这种方法 第二种方法,相对于来说逻辑就比较简单了.只要获取到SD卡对象,遍历里面的文件或者直接指定某一个文件夹,接下 来就是读取文件内容或文件夹中的内容了. 对于上面的两种方法,作为初学者的我最近都尝试了好几遍,着实感觉学到了好多.多次逛博客,贴吧,