相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取。

年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验。

正常的前端会把接口写在另一个接口的回调里。是这样不错,但是它增加了函数的嵌套深度也会造成一定的逻辑混乱。

也许有朋友会说,哪那么多毛病,解决问题不就好了吗?

但是,如果需要的是另外好几个接口的返回数据呢?这时候就会比较蛋疼了。这就是回调地狱!

当时依稀记得是使用了jQuery的 when .then方法去解决的。

直到遇见了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的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。

使用ES6的Promis完美解决ajax的回调(优化代码)的更多相关文章

  1. 使用ES6的Promise完美解决回调地狱

    相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...

  2. AJAX中文乱码PHP完美解决(IE和Firefox兼容)

    最近在做一个项目,遇到AJAX中文乱码问题,经过一个下午的努力终于完美解决,现将心得写下来,希望对那些还困绕在这个问题而头痛不已的人们有所帮助. 众所周知,使用AJAX传送和接收中文参数时,如果不在客 ...

  3. 用Promise解决多个异步Ajax请求导致的代码嵌套问题【转】

    问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ u ...

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

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

  5. emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

    想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...

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

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

  7. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  8. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  9. 完美解决 Linux 下 Sublime Text 中文输入

    首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...

随机推荐

  1. mac上安装mongoDb以及简单使用

    年初粗略学习了下node,这好几个月没玩,突然发现已经忘完了,还是简单记录下基本知识,方便再次使用时资料查找. 一.mongoDb安装 在mac上安装了brew的情况下,可以直接执行命令 brew i ...

  2. EasyDarwin开源流媒体服务器中一种实现对作用域内new对象自动释放的方法(值得借鉴)

    我们经常在开发过程中,在局部new了一个对象,我们就会在复杂的逻辑过程中担心这个对象是否已经被释放,需要在一大堆的if.else.while.break进行判断new对象是否还存在,或者相同的dele ...

  3. 基于Photon 的 PUN+ 如何自动实现RPC呼叫的.

    基于Photon 的 PUN+ 如何自动实现RPC呼叫的. 简单说函数标记成 RPC 类型的. void Hello() { Debug.Log("Hello"); PhotonV ...

  4. [面试时]我是如何讲清楚TCP/IP是如何实现可靠传输的 转

    [面试时]我是如何讲清楚TCP/IP是如何实现可靠传输的 - shawjan的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/shawjan/article/det ...

  5. Weex 解析(二)—— NativeBridge

    (本篇幅主要讲解Weex 中iOS native与js交互实现) 大纲: weex 总框架预览 iOS NativeBridge总设计原理 一.weex 总框架预览 在写NativeBridge 总设 ...

  6. thunderbird 设置 邮件回复时内容在上方显示

    1 . 编辑->属性 2.选择当前账户,在弹出窗体的右下角 选择 管理标示 ,在弹出窗中选择编辑 3.在弹出标识设置窗体中选择 编写&地址簿 选项卡选择 在引用内容之前回复

  7. CF311B Cats Transport

    题意 Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straigh ...

  8. Cam350导入Allegro的*.rou文件

    如果生产allegro的生产文件有椭圆形钻孔,生成.rou.直接自动导入到cam350是没办法成功的. 以下说说本人的步骤.allegro里面的单位都是mm 在cam350的File-->Imp ...

  9. 企业建站系统MiinCMP1.0.5 版公布!

    2014-5-4,在青年节,Juuluu公布了其企业建站系统的新版1.0.5,经过两周多的奋战,Juuluu团队为MiinCMP新浪云版的移植工作做了大量工作.1.0.5已可完美执行于国内免费的jav ...

  10. 关于yum

    1. yum的本地安装 yum install --downloadonly --downloaddir=/opt/software cd /opt/software yum localinstall ...