最近闲赋在家,终于有时间回顾我在工作中遇到的一些东西,由于经验不足,有些方面做的不是很好。在上家公司曾经遇到一个小问题,就是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接口参数来自另一个接口的问题的更多相关文章

  1. 解决Ajax请求后台Servlet接口拿不到JSON数据问题

    前端Ajax请求代码如下: window.onload=function() { var url='http://127.0.0.1:8080/testpj/ErrorlogServlet'; $.a ...

  2. Springboot如何优雅的解决ajax+自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  3. Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  4. webservice不能序列化接口问题,返回值为IList或者参数为接口的解决办法。

    1. webservice 不能返回泛型接口集合IList,解决办法如下链接: 参考资料:http://www.cnblogs.com/yinhaiming/articles/1379424.html ...

  5. MyBatis多个接口参数报错:Available parameters are [0, 1, param1, param2], 及解决方法

    1. sql语句如下: SELECT * FROM tb_crm_user WHERE id = #{userId, jdbcType=INTEGER} AND user_name = #{userN ...

  6. 20191204-使用nginx解决ajax测试调用接口跨域问题

    问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...

  7. 从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. WebApi 接口参数详解

    WebApi 接口参数不再困惑:传参详解   阅读目录 一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4.“怪异”的get请求 二.post请求 1.基础类型参数 2.实体作为 ...

  9. 关于ajax提交的公共接口的一大用处

    在项目框架搭建的时候,就写了ajax提交的公共接口,是想统一的日志和处理ajax返回的错误信息. 今天,却又帮我解决了另外一个问题:每次点开某个页面,有一个ajax请求总是会调用两次,于是打开chro ...

随机推荐

  1. Visual Studio 2017正式版使用一些疑问

    刚升级完2017,是从2015升上去的,总体没有什么大的问题,就是报了一些ts的类型检查的问题,最重要的就是编译速度变得好慢啊,希望尽快出来补丁修复,以前一个解决方案只要10+秒,现在要50秒,表示体 ...

  2. UI设计学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的UI设计学习路线图包含初中高三个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.baidu.co ...

  3. swiper入门之快速实现轮播--手机端

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. oracle expdp导出远程数据到本地

    1.本地数据库新建一个用户test,并授予以下基本权限(尽量不要多授权,如本地权限大于远程,会导致导出失败,郁闷!): grant connect to test;grant resource to ...

  5. Android 一个改善的okHttp封装库

    膜拜一下~ 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49734867: 本文出自:[张鸿洋的博客] 一.概述 之前写了篇A ...

  6. 使用js实现ajax的get请求步骤

    (以下内容非原创,视频整合得来的) 1.创建XMLHttpRequest对象 2.浏览器与服务器建立连接 3.浏览器向服务器发送请求 4.服务器向浏览器响应请求 下面给出一个实例 1.创建一个test ...

  7. oslo_config中的DuplicateOptError坑

    前言: 最近在重写公司的Cinder Driver,我们driver是按照OpenStack的要求,依赖一个叫oslo_config的一个包.这个包的作用就是让driver申明所依赖的选项(可以来自文 ...

  8. Team Foundation Server 基本功能

    Team Foundation Server(以下简称TFS)作为Microsoft发布的一个主要用于团队源代码管理工具,以敏捷开发作为其最大的特点而占领部分市场.该文主要介绍 TFS 在 Visua ...

  9. web注册功能实现

    开发工具:Eclipse Web前端语言:html+jsp 后端数据库:MySQL 数据库UI工具:Navicat for MySQL (根据网上各位前辈的信息,自学实现这个注册基本功能,以后要是学到 ...

  10. 【树莓派】h2数据库操作相关

    之前在树莓派上面操作时候,遇到一些业务方面的bug,和团队中的同事经过多次尝试,但就是难以重现用户现场的问题. 但是问题却实实在在地发生,虽然并不是必然可重现的bug,但是也比较闹心: 发生了问题,也 ...