相信经常使用 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 都成功返回数据才执行的业务逻辑
- })
来源: http://www.jianshu.com/p/86dead6a5cdb