欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于使用ajax发送请求异步的问题

程序员文章站 2024-01-24 09:13:16
...

今天在做项目时遇到了一个问题,

这是前台主页面中对子页面操作的按钮部分,我想在页面初始化的时候发送请求然后根据权限把对应的按钮隐藏掉,前台页面跳转用的是angular的ui-router
但是在发送请求时怎么也获取不到页面上的这几个按钮.我使用的$.post()方法刚开始时以为代码有问题,来回调试了好几个小时结果还是不行.后来想到可能是异步请求加载顺序的问题,可能是页面没有加载出来的时候我就已经调用给按钮设置css的代码了.然后在网上查询这方面的问题,终于找到了一种新的写法(本人以前没有用过)

function showButtonByAuth(state){
        return new Promise(function(resolve,reject){
            //ajax...
            $("#pageNav ul li").hide();
            $.post("module/auth/getButtonAuth.do",{"resourceString":state},function(response){
                resolve(response)
            })
            //如果有错的话就reject
        })
    }

定义时候的代码是上面这样,调用的时候是这样的

showButtonByAuth("business").then(function(response){
        if(response.length>0){
            $.each(response,function(i,item){
                $("."+item).show();
            });
        }
        $("#pageNav ul").css("width",response.length*52);
    })

后来问题就解决了 在网上搜索了一下这个promise
Promise对象有三种状态,他们分别是:

pending: 等待中,或者进行中,表示还没有得到结果
resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行
rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行
这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化。
Promise对象中的then方法,可以接收构造函数中处理的状态变化,并分别对应执行。then方法有2个参数,第一个函数接收resolved状态的执行,第二个参数接收reject状态的执行。
fn.then(resolve)这是成功时候执行的函数,fn.then(reject)这是失败时候的函数

由于本人是个菜鸟,可能语言表达上有些欠缺,但是这次的经历先在博客上记下来方便以后回顾!

相关标签: ajax