回调地狱
异步回调地狱，通常的表现为：
JS函数从上至下的层层嵌套，前面函数是后面函数的所需参数。
$.ajax({
type:'post',
url:'/index/jquerydata',
dataType:'json',
success:(res)=>{
if (res.success) {
$.ajax({
type: 'get',
url: '/index/secondata',
dataType:'json',
success: (data) =>{
}
});
}
}
});
好比上边的例子：
“/index/secondata"是在”/index/jquerydata"请求成功之后，才向服务daunt发起请求的。
过多的回调也就让我们陷入“回调地狱”。通常表现：
1、代码臃肿。
2、可读性差。
3、耦合度过高，可维护性差。
4、代码复用性差。
5、容易滋生 bug。
6、只能在回调里处理异常。
接下来会介绍一些方法来规避回调地狱。
1、减少代码嵌套，拆解function（模块化）
回调嵌套直接影响代码可读性、可维护性。最简单的方法就是将函数拆分为单个功能性函数。
若函数功能多、逻辑多的情况下，可以将其该功能作为一个功能模块存在，在需要时导入。
let lists= () => {
$.ajax({
type:'post',
url:'/index/jquerydata',
dataType:'json',
success:(res)=>{
if (res.success) {
detail(res);
}
}
});
};
let detail = (data) => {
$.ajax({
type: 'get',
url: '/index/secondata',
dataType:'json',
success: (res) =>{
}
});
};
2、事件监听
const handlerLists = (e) => {
let detail = (data) => {
$.ajax({
type: 'get',
url: '/index/secondata',
dataType:'json',
success: (res) =>{
}
});
};
}
// 创建自定义函数
// @param [node] dom 响应事件的DOM节点
// @param [string] eventName 事件名称
// @param [function] handler 处理函数
// @param [boolean ] boolean 事件是否在捕获或冒泡阶段执行
// @param [everyType]params 传递的数据({detail:参数})
const createEvent = (dom,eventName,handler,boolean,params) => {
const timeOutEvent = new CustomEvent(eventName,params);
objj.addEventListener(eventName,handler ,boolean);
objj.dispatchEvent(timeOutEvent);
}
let lists= () => {
$.ajax({
type:'post',
url:'/index/jquerydata',
dataType:'json',
success:(res)=>{
if (res.success) {
createEvent(objj,'timeOutEvent',handlerLists ,true,{detail: []});
}
}
});
};
3、Promise
promise是一种异步解决方案，可以通过多数浏览器已经支持。
function pro1 () {
return new Promise((resolve)=>{
resolve('任务111111返回值！');
});
}
function pro2 () {
return new Promise((resolve)=>{
resolve('任务222222返回值！');
})
}
pro1().then((data)=>{
console.log('1111111------',data); // 任务111111返回值！
return pro2;// 下一个then的data
}).then((data)=>{
console.log('2222222------',data);// 上一个thenreturn的数据
return pro3;
})