Promise优雅解决异步回调

===导语：相信很多小伙伴在项目中都会遇到ajax异步这个问题吧，只有获取到后台返回的数据，才能进行下一个ajax请求（或者逻辑处理）。
用参数 async: false 将异步变成同步是一个解决办法。但是当一个个ajax请求嵌套的话。可读性太差，性能也会变低。
此篇文章将通过promise的方法解决异步回调问题。

项目需求：
点击体检门店，弹出省级，点击‘确定’请求对应的市级城市，点击选中的城市请求对应的体检门店。（如下图）

设计原型：
同一个接口，点击确定时传给后台选中的target的code号，响应成功后返回下一级内容。
前端获取返回的数据后，对对应层级的数组进行遍历内容拼接到显示列表中。
实现：
1.因为是同一接口，所以就把ajax请求的异步函数进行封装，并传入所需要的参数。（如下图）

2.把获取的异步数据处理逻辑封装在一个函数中。

3.当点击‘确定’后，调用封装ajax请求函数，传入需要的参数。.then()方法处理异步获取后的数据其他逻辑。（如下图）

总结：

通过以上方法，把ajax请求封装一个函数，请求数据得到后的逻辑和数据处理也封装成函数。等点击事件时再通过Ajaxfunction.then(dataHandle)调用。好处有以下：
1.专注于逻辑处理，代码可读性更高。
2.不同函数处理不同的逻辑，功能模块化，出错误时更容易定位问题所在点。
3.代码更简洁，更美观。
4.完美解决后台数据没获取而要进行对数据的处理问题。

其他：
当然，此方法不仅仅有以上优点，还有更强大的功能，更值得运用的理由。

1.不仅要处理成功后的逻辑，失败时的逻辑自然也是可以完美处理的。
Ajaxfunction.then(
function(data){获得成功返回数据的处理逻辑},
function(reason){响应失败时要处理的逻辑}
）
第一个函数对应成功后逻辑处理，第二个函数对应失败后的处理逻辑。

或者
Ajaxfunction.then(function(data){获得成功返回数据的处理逻辑})
.catch(function(reason){响应失败时要处理的逻辑})

2.我不仅有一个基于异步请求的处理函数，还有多个函数是基于.then(dataHandle)之后获得得数据处理呢？
Ajaxfunction.then().then()
你有多少个函数处理是基于上一层级获得的数据，就用几个.then()这样的链式操作吧。

3.那我要是有好几个处理方法都处理完毕后以此为基础的值才做下一步处理呢？
Ajaxfunction.all([function1,function2,…]).then()
此时then接收的参数是计算后的数组。

拓展：
关于Promise的用法，除了以上还有其他。有兴趣的话，可以移步此篇博客个人觉得不错。
关于异步和同步的认识，请移步这里，希望有所帮助！