使用ES6的Promise完美解决回调地狱
来源:互联网 发布:阿里云代理商技术 编辑:程序博客网 时间:2024/04/28 03:58
相信经常使用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的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。
阅读全文
0 0
- 使用ES6的Promise完美解决回调地狱
- 使用ES6的Promise完美解决回调地狱
- 再不用ES6就Out了--Promise解决回调地狱
- ES6 Promise实际项目用法 (避免回调地狱)
- 分享回调地狱的体现与利用es6 Promise对回调的改良和实现
- es6 promise的使用
- ES6的Promise简单使用
- javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方案
- JavaScript拒绝回调地狱,从 Promise 到 co 的实例
- 利用generator(thunk化函数/promise方法)处理回调地狱的问题
- 使用when.js解决函数回调地狱
- ES6 Promise的理解
- ES6的Promise
- ES6的Promise
- ES6的Promise详解
- 关于ES6的Promise的使用深入理解
- 浅谈ES6的 promise API
- ES6 JavaScript Promise的初识
- Mysql数据库与sql语言(四)---jdbc
- JQuery中$.ajax()方法参数详解
- Liunx vsftpd安装手册,附带我的安装详细步骤
- 使用Docker环境快速搭建靶机环境
- 《关于雅思》
- 使用ES6的Promise完美解决回调地狱
- Hystrix仪表盘--Unable to connect to Command Metric Stream
- andriod 相关,懒得总是翻枪
- 原型模式(Prototype)
- UVa --- 10795 A Different Task 汉诺塔不一样的操作【递归 + 思维】
- 重庆2日游
- 切线空间法线
- Phoenix 采用bulkload 导入 hbase (2017-8-16)
- MFC与先锋aria