使用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>