使用axios加入进度条

思路：（安慰剂按钮）首先当触发按钮时，设置拦截器，启动进度条从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>