回调地狱

异步回调地狱，通常的表现为：
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;
})

4、generator（稍后补充）