使用ajax 回调函数返回值 使用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方法就是处理业务逻辑,代码异常清晰。

反正我用了几次之后是离不开它了,很好很强大。

如果你也想学的话推荐参看ECMAScript 6入门一书中讲解Promise的那一章。

我百度了很多Promise的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。





原文地址:https://www.cnblogs.com/qq9694526/p/5714124.html

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fastjack/article/details/79981261
个人分类: JS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭