使用promise解决回调地狱_使用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方法就是处理业务逻辑，代码异常清晰。