码迷,mamicode.com
首页 > 移动开发 > 详细

使用axios加入进度条

时间:2019-02-16 15:33:03      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:list   精度   .data   info   接口   ntb   ref   配置   inter   

思路:(安慰剂按钮)首先当触发按钮时,设置拦截器,启动进度条从0开始到100满(html进度条用数值value来控制,默认为0),设置进度条的配置函数
然后在后端返回函数中启动停止精度条的函数,为了保持返回函数和进度条效果的一致性,加入延时,达到线程同步的效果
代码如下:
首先导入jquery和axios js包
其次需要加入进度条的前端加入进度条

技术图片

然后在写入:

<script>
        //建立进度条对象
        let pg = document.getElementById("pg");
        

        //定义登录方法
        function login(){
            var username = $("#username").val();
            var password = $("#password").val();
            var code = $("#code").val();
            //拦截器
            axios.interceptors.request.use(function(config){
                //启动进度条
                icount = setInterval(function(){
                    //判断进度条的进度
                    if(pg.value != 100){
                        pg.value++;
                    }
                    else{
                        pg.value = 0;
                    }
                },100);
                //返回配置文件.
                return config;   
            });
        //使用axios来请求接口
        //初始化传参
        let param = new URLSearchParams();
        //将参数传递给对象
        param.append(username,username);
        param.append(password,password);
        param.append(code,code);
        axios({
            //指定请求地址
            url:/supermarket/do_login,
            //请求参数
            data:param,
            //请求类型
            method:post,
            //接口返回值类型
            resposeType:"text"
        })
        .then(function(obj){
            //停止进度条
            clearInterval(icount);
            //将进度条填充到100
            pg.value = 100;
            // //进行页面跳转
            if(obj.data=="登录成功"){
                //加入延时,达到线程同步的效果
                setTimeout(func,500);
                function func(){
                    alert(obj.data)
                window.location.href="/supermarket/productlist";
                }
            }
        });
    } 
    </script>

 

使用axios加入进度条

标签:list   精度   .data   info   接口   ntb   ref   配置   inter   

原文地址:https://www.cnblogs.com/xcsg/p/10387655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!