优雅地解决Ajax接口参数来自另一个接口的问题
最近闲赋在家,终于有时间回顾我在工作中遇到的一些东西,由于经验不足,有些方面做的不是很好。在上家公司曾经遇到一个小问题,就是Ajax的接口中有参数是从另一个接口后台传来的。当时我的做法是将需要参数的接口写在获取参数的接口中,算是完成了任务。现在想想这段代码写得太渣了,代码如下:
$.ajax({
type:"get",
url:"index.aspx",
success:function(data)
$.ajax({
type:"get",
url:"index.aspx",
data:data.ticket,
success:function(data){ }
});
} });
里面的data.ticket是从上一个接口获取的,这么写当然没有太大的问题,程序可以运行下去的。有人说这不就行了么,解决了就可以了啊。我想说的是如果
我需要两个参数,且这两个参数是从不同的接口给我的怎么办?这就是所谓的回调地狱!最近有时间从头复习了遍基础,发现有个忽略的东西----promise,
用这个可以完美优雅地解决这个问题。
//创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
var getUserInfo=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在异步操作成功时调用
}else{
reject(data.ErrMsg);//在异步操作失败时调用
}
}
});
})
//另一个ajax Promise对象,
var getDataList=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在异步操作成功时调用
}else{
reject(data.ErrMsg);//在异步操作失败时调用
}
}
});
})
//Promise的方法then,catch方法
getUserInfo.then(function(ResultJson){
//通过拿到的数据渲染页面
}).catch(function(ErrMsg){
//获取数据失败时的处理逻辑
})
//Promise的all方法,等数组中的所有promise对象都完成执行
Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
//这里写等这两个ajax都成功返回数据才执行的业务逻辑
})
这样的代码分工非常明确,ajax就是拿数据的,.then .catch方法就是处理业务逻辑,代码异常清晰。反正我用了几次之后是离不开它了,很好很强大。如果你也想学的话推荐参看ECMAScript 6入门一书中讲解Promise的那一章。我百度了很多Promise的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。
优雅地解决Ajax接口参数来自另一个接口的问题的更多相关文章
- 解决Ajax请求后台Servlet接口拿不到JSON数据问题
前端Ajax请求代码如下: window.onload=function() { var url='http://127.0.0.1:8080/testpj/ErrorlogServlet'; $.a ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- webservice不能序列化接口问题,返回值为IList或者参数为接口的解决办法。
1. webservice 不能返回泛型接口集合IList,解决办法如下链接: 参考资料:http://www.cnblogs.com/yinhaiming/articles/1379424.html ...
- MyBatis多个接口参数报错:Available parameters are [0, 1, param1, param2], 及解决方法
1. sql语句如下: SELECT * FROM tb_crm_user WHERE id = #{userId, jdbcType=INTEGER} AND user_name = #{userN ...
- 20191204-使用nginx解决ajax测试调用接口跨域问题
问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...
- 从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- WebApi 接口参数详解
WebApi 接口参数不再困惑:传参详解 阅读目录 一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4.“怪异”的get请求 二.post请求 1.基础类型参数 2.实体作为 ...
- 关于ajax提交的公共接口的一大用处
在项目框架搭建的时候,就写了ajax提交的公共接口,是想统一的日志和处理ajax返回的错误信息. 今天,却又帮我解决了另外一个问题:每次点开某个页面,有一个ajax请求总是会调用两次,于是打开chro ...
随机推荐
- BOM基础(三)
在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...
- Tyvj P1813 [JSOI2008]海战训练
P1813 [JSOI2008]海战训练 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 为了准备高层峰会,元首命令武装部队必须处于高度戒备.警察将监视每一条 ...
- 1202: [HNOI2005]狡猾的商人
1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1554 Solved: 745[Submit][Stat ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- 读书笔记 effective c++ Item 32 确保public继承建立“is-a”模型
1. 何为public继承的”is-a”关系 在C++面向对象准则中最重要的准则是:public继承意味着“is-a”.记住这个准则. 如果你实现一个类D(derived)public继承自类B(ba ...
- PowerDesigner建模应用(二)逆向工程,导出PDM文件前过滤元数据(表、视图、存储过程等)
在上一篇文章<PowerDesigner建模应用(一)逆向工程,配置数据源并导出PDM文件>步骤二中导出了目标数据库对应的PDM文件, 该文件中展示出了所有表的信息与关系. 某些业务场景下 ...
- Spring Data JPA,一种动态条件查询的写法
我们在使用SpringData JPA框架时,进行条件查询,如果是固定条件的查询,我们可以使用符合框架规则的自定义方法以及@Query注解实现. 如果是查询条件是动态的,框架也提供了查询接口. Jpa ...
- Spring Boot启动过程(六):内嵌Tomcat中StandardHost与StandardContext的启动
看代码有助于线上出现预料之外的事的时候,不至于心慌... StandardEngine[Tomcat].StandardHost[localhost]的启动与StandardEngine不在同一个线程 ...
- 解决Chrome动画”卡顿”的办法
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬 ...
- Linux块设备IO子系统(二) _页高速缓存
磁盘驱动就是实现磁盘空间和内存空间数据上的交互,在上一篇中我们讨论了内存端的Page Segment Block Sector相关的概念,本文以3.14内核为例,讨论这部分内存是如何被组织管理的.我们 ...