解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

最近我在做angularjs程序时遇到了一个问题

1.页面有很多选择框，一个选择框里面有众多的选择项，和一个默认选定的项,像下面这样（很多选择框，不只一个）：

2.众多的选项要从后台接口得到，默认项从另一个后台接口得到，这就需要$promise.then（）操作

3.而多个$promise.then（）属于异步操作，先后顺序不是一定的，如果先得到众多选项，后得到默认值，显示就没有问题，如果顺序颠倒，默认项就会为空，这不是我想要的

4.这就需要众多选项的后台请求都获得完，才去后台请求默认值，

就用$q.all方法

let list = $q.all({　   // 多个后台请求，部分先后顺序
 url1: getUrl1().$promise,
 url2: getUrl2().$promise,
 url3: getUrl3().$promise,
});
$scope.list.then(function (result) {
　　// 三个后台请求结果
 result.url1
 result.url2
 result.url3
}).finally(function () {  // finally的优点：1.无论成功失败都会执行 2.前面三个请求结束后才会执行
 // 最后一个后台请求
　　 // TODO
});

补充：当然还有then().then().then()......这种方法，就把请求顺序执行了，不过select众多选项的后台请求不需要先后顺序，只是默认项需要最后执行，我就选择$q.all这种方法了。

总结

以上所述是小编给大家介绍的解决Angularjs异步操作后台请求用$q.all排列先后顺序问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解angularjs利用ui-route异步加载组件

    ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等.随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k.异步加载各个组件就很有必要.在这里我就以ui-route为框架来进行异步加载说明. 首先看一下路由加载文件 angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) { $sta

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

  • AngularJS 异步解决实现方法

    AngularJS 异步解决实现方法 Angular 的异步处理的真的很不错.基于消息广播的方式,并且可以向上传递,基本上解决了不同模块,不同controller之间不方便异步的问题. 场景一:通过回调函数进行异步操作(该情况下不用消息广播的机制) 这种情况的特点是直接传递一个回调函数给异步操作就可以了,等异步操作完执行回调. 比如:controller通过server异步取数据,等取完数据进行一系列的操作,这个时候就可以把操作封装到函数中,传递给异步操作函数. controller代码片段举例

  • angularjs 处理多个异步请求方法汇总

    在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) {         $http.get('url2').success(function (d2) {             //处理逻辑         });     }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang

  • AngularJS 实现按需异步加载实例代码

    AngularJS 实现按需异步加载实例代码

    AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了! 随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性加载,使用起来非常不便, 因此按需加载模块的需求会越来越强,不过,AngularJS 并没有实现按需加载. 习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿. angularjs 和 requi

  • AngularJS发送异步Get/Post请求方法

    1.在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app="MyApp" ng-controller="MyCtrl" > ... <script src="js/angular.min.js"></script> <script src="js/sbt.js"></script> 2.添加必要的控件并绑定相

  • angularjs中$http异步上传Excel文件方法

    1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"> <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button> <input id="file_asset" type

  • 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

    最近我在做angularjs程序时遇到了一个问题 1.页面有很多选择框,一个选择框里面有众多的选择项,和一个默认选定的项,像下面这样(很多选择框,不只一个): 2.众多的选项要从后台接口得到,默认项从另一个后台接口得到,这就需要$promise.then()操作 3.而多个$promise.then()属于异步操作,先后顺序不是一定的,如果先得到众多选项,后得到默认值,显示就没有问题,如果顺序颠倒,默认项就会为空,这不是我想要的 4.这就需要众多选项的后台请求都获得完,才去后台请求默认值, 就用

  • 快速解决angularJS中用post方法时后台拿不到值的问题

    用angularJS中的$http服务碰到了一个问题:运用$http.post方法向后台传递数据时,后台的php页面获取不到data参数传过来的值. 不论是这种姿势: $http.post( "1.php", { id: 1 }).success(function (data) { console.log(data); }); 还是这种姿势: $http({ method: 'POST', url: '1.php', data: { id: 1 } }).success(functio

  • 解决angularjs中同步执行http请求的方法

    如下所示: self.tableParams = new NgTableParams({}, { getData: function (params) { $http.post("rest/staff/page", $scope.req).success(function (data) { if (data != null && data != undefined) { $scope.staffs = data.data; params.total($scope.tot

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • React如何解决fetch跨域请求时session失效问题

    React如何解决fetch跨域请求时session失效问题

    前言 fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise

  • 解决axios发送post请求返回400状态码的问题

    今天在用 axios 发送一个跨域的post请求时,遇到了一个坑:Uncaught (in promise) Error: Request failed with status code 400. 前台代码如下: axios({ method: "post", url: "http://localhost:8080/employee/testpost", data: { username: '234234', password: '4565' } }).then((

  • 解决angularjs前后端分离调用接口传递中文时中文乱码的问题

    1.首先前端需要进行字符串加密两次 encodeURIComponent(encodeURIComponent(param)); 2.这里是以java后台为例需要进行一次解码 URLDecoder.decode("接受到的String类型参数","UTF-8") 示例如下: @RequestMapping("looked_list") public Map lookedList(@RequestParam Map map) throws Unsu

  • 解决Python发送Http请求时,中文乱码的问题

    解决方法: 先encode再quote. 原理: msg.encode('utf-8')是解决中文乱码问题. quote():假如URL的 name 或者 value 值中有『&』.『%』或者『=』等符号,就会有问题.所以URL中的参数字符串也需要把『&=』等符号进行编码,quote()就是对参数字符串中的『&=%』等符号进行编码. 例子: # -*- coding: UTF-8 -*- # python2.7 from urllib import quote import req

  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, data) { return new Promise((resolve, reject) => { instance.post(url,data,{responseType: 'blob'}).then(response => { resolve(response); }, err => {

  • 解决SpringBoot在后台接收前台传递对象方式的问题

    解决SpringBoot在后台接收前台传递对象方式的问题

    问题描述 前台传递对象,不管是通过ajax请求方式,还是axios请求方式.后台应该怎么接收对象处理呢? 比如前台传递 ajax方式: $.ajax({ url: "后台的方式", async: false, type: "POST", dataType : "json", data: JSON.stringify(formParamObj), contentType:'application/json;charset=utf-8', succe

随机推荐