使用ES6的Promise完美解决回调地狱
相信经常使用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的Promise完美解决回调地狱的更多相关文章
- 【JavaScript】 使用Async 和 Promise 完美解决回调地狱
很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...
- ES6(promise)_解决回调地狱初体验
一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...
- promise对象解决回调地狱
先放一张图片感受一下回调地狱 看起来是真的很让人头痛的东西 而现在我这里使用promise对象来解决回调地狱 采用链式的 then,可以指定一组按照次序调用的回调函数. 这时,前一个 then 里的一 ...
- Promise如何解决回调地狱
为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...
- ES6新增"Promise"可避免回调地狱
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- 回调地狱以及用promise怎么解决回调地狱
哈哈哈,我又又又回来了,不好意思,最近枸杞喝的比较到位,精力比较旺盛. 现在我们来聊一聊啥是回调地狱,注意是回调地狱啊 不是RB人民最爱拍的那啥地狱啊,来吧,上车吧少年,这是去幼儿园的车 都让开, ...
- 使用ES6的Promis完美解决ajax的回调(优化代码)
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...
- 基于PROMISE解决回调地狱问题
回调地狱问题: 在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱.比如说你要把一个函数 A 作为回调函数, ...
- Promise,async/await解决回调地狱
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...
随机推荐
- Django 的ORM 数据操作
from teatcher.models import Student 导入app(teatcher)下的模型(Student) In [11]: res = Student.objects ...
- 题目--oil Deposits(油田) 基础DFS(深度搜索)
上一次基本了解了下BFS,这次又找了个基本的DFS题目来试试水,DFS举个例子来说就是 一种从树的最左端开始一直搜索到最底端,然后回到原端再搜索另一个位置到最底端,也就是称为深度搜索的DFS--dep ...
- Django formset
一 什么是formset Form组件或ModelForm用于做一个表单验证而formset是用于做多个表单的验证组件,用于做批量操作 二 formset的使用方法 1 设置form信息 class ...
- powershell获取windows子文件夹的大小
$startFolder = "E:\Migration\" $colItems = (Get-ChildItem $startFolder | Where-Object {$_. ...
- 目录命令(tree)
TREE 命令: // 描述: 以图形方式显示驱动器中路径或磁盘的目录结构. // 语法: tree [<Drive>:][<Path>] [/f] [/a] // 参数: / ...
- OpenCV-可视化界面Image Watch
平台:Win10 x64+vs2015专业版+opencv-3.4.1-vc14_vc15 一直觉得OpenCV在调试方面不如MATLAB灵活方便,没成想OpenCV官方早就推出了一个叫Image W ...
- IOS xib和代码自定义UIView
https://www.jianshu.com/p/1bcc29653085 总结的比较好 iOS开发中,我们常常将一块View封装起来,以便于统一管理内部的子控件. 下面就来说说自定义View的封装 ...
- ubuntu 14.04下搭建esp32开发环境
esp32是乐鑫出品的一款集成了wifi和蓝牙的集成模块,板上自带两个哈佛结构的Xtensa LX6 CPU双核处理器,本文主要讲解如何在linux下搭建其编译开发环境. 首先ctrl+alt+t打开 ...
- 冲刺博客NO.10
今天做了什么:将程序整合到一起,出现了不少小错误,但是在讨论后都解决了. 遇到的难题:没遇到什么大困难
- C# Autofac集成之Framework WebAPI
Web API 2集成需要Autofac.WebApi2 NuGet包. Web API集成需要Autofac.WebApi NuGet包. Web API集成为控制器,模型绑定器和操作过滤器提供了依 ...