“回调地狱”是什么
”回调地狱“也叫”回调金字塔“,我们平时写代码的时候 js如果异步 回调是不可避免的
例如 ajax不断的进行异步请求数据 回调方法里还要对数据进行处理,继续回调…形成回调地狱
这会使得我们的代码可读性变差,出现问题 不好调试 也会导致性能下降
而nodejs 是一种单线程的事件驱动而且是非阻塞的I/O模型,而I/O模型,是异步的,这样nodejs在处理结果的时候 就需要在回调函数中执行,这样也就形成了回调地狱。
那我们应该如何优雅的避免回调地狱呢
递归?No! 递归用在一些简单的场景下还是很方便的,例如快速排序,哈哈,但是在处理复杂的逻辑上,似乎有点不合适..
jQuery 1.5提供了jQuery.when() then()方法 differ对象
具体可以看一下api:http://www.css88.com/jqapi-1.9/jQuery.when/
es6 =>Promise、Generator以及 es7 => Async
- Promise
是一个构造函数,用来传递异步操作消息,链式调用,避免层层嵌套的回调函数。
promise接收两个函数参数,resolve和reject,分别表示异步操作执行成功后的回调和失败的回调
promise在声明的时候就已经执行了
有三种状态:pending进行中、resolve已完成、rejected已失败,
这些状态只能由pending -> resolved, pending -> rejected,一旦promise实例发生改变,就不能在变了,任何时候都能得到这个结果
例子一:用三个小球依次向右运动
function moving(obj, left){
//创建一个promise实例 并传入两个函数参数 来设置promise的状态
return new Promise(function(resolve,reject){
var leftPos = parseInt(obj.css('margin-left'));
if(leftPos != left){
var timer = setInterval(()=>{
leftPos += 2;
obj.css('margin-left',leftPos);
if(leftPos == left){
clearInterval(timer)
resolve() //成功 运动完成之后 返回一个状态resolved then接收到后继续执行下一个回调
}
},10)
}else{
resolve()
}
})
}
//采用promise链式操作的方式 通过传递状态的方式来调用回调函数
moving($('.b1'),100)
.then(function(){ //当b1运动完成 并且成功之后 链式调用b2
return moving($('.b2'),200) //then函数返回的是一个新的promise对象,继续then
})
.then(function(){ //当b2运动完成 并且成功之后 链式调用b3
return moving($('.b3'),300)
})
例子二:ajax 异步调用
ajax异步回调问题,我们要优雅的避免各种回调嵌套,这里我将做一个例子:分别请求两个接口,等到数据都拿到 在进行业务处理
//获得商品列表 实例化promise 并传入resolve 和 reject两个参数
var getGoodsList = new Promise(function(resolve,reject){
axios.get('/ggserver/api/products/list',{params})
.then(function(res){
if(res.data.code == '200'){
resolve(res.data.result) //成功
}else{
reject(res.data.errMsg) //失败
}
})
})
//我们在请求一个分类列表
var getGoodsType = new Promise(function(resolve,reject){
axios.get('/ggserver/api/goodsType')
.then(function(res){
if(res.data.code == '200'){
resolve(res.data.result) //成功
}else{
reject(res.data.errMsg) //失败
}
})
})
然后。在将获得的数据进行业务处理
getGoodsList.then(function(goodslistdata){
//处理业务
}).catch(function(errMsg){
//失败业务
console.log('哎,goodslist运气不佳...')
})
getGoodsType.then(function(goodsTypedata){
//处理业务
}).catch(function(errMsg){
//失败业务
console.log('哎,goodstyoe运气不佳...')
})
最后 我们通过promise.all()方法来 等列表 和 类型加载完 进行其他业务处理
Promise.all([getGoodsList, getGoodsType]).then(function([data1,data2]){
console.log(data1,data2,'已经加载完成啦')
})