接口在5秒之后未返回数据，自动加载百分比

飞熊 • 2023年7月14日下午4:44 • 前端开发 • 阅读 221

   //定义变量
    data(){
        return {
            timeOutObj: {},
            indexTime: 1, //定义时间初始值
            indexTimeInt: {},//定义时间计时器
            process: "0%", //定义进度百分比
            setAdd: {},//定义百分比累加计时器
        }
    }

法一：定时器setInterval实现

        //开启计时器，只需要在调用接口前开启计时器
        openSetInterVal() {
            var self = this
            self.indexTime = 1 //定义一个初始值，用来计算秒数
            self.indexTimeInt = setInterval(() => { //定义一个计时器，
                if (self.indexTime >= 5) { //如果超过5秒执行，加载框
                    self.loading = true
                    self.indexTime = 1 //并初始化计时值
                    //下面是自动加载百分比，从0-95
                    var num = 1;
                    self.setAdd = setInterval(function () {
                        var len = 95;//显示的最大数值，可以随意设置
                        if (num >= len) { //如果大于95，就关闭计时器
                            clearInterval(self.setAdd)
                            clearInterval(self.indexTimeInt)
                        } else { //否则就加1
                            num += 1;
                        }
                        self.process = num + "%"
                    }, 20)
                } else { //没有超过5秒，就每1秒indexTime加1
                    self.indexTime += 1
                }
            }, 1000)
        },
        // 关闭计时器，在接口成功返回数据时关闭计时器
        closeSetInterval() {
            this.indexTime = 1
            this.loading = false
            clearInterval(this.indexTimeInt)
            clearInterval(this.setAdd)
        },

法二：定时器setTimeout实现

用setTimeout实现，就是直接时间设置为5秒，保存接口返回的response数据，判断是否为空，如果为空，则说明接口响应时间大于5秒，就加载进度条，否则说明反应时间在5秒之内，不作操作。

            var self = this
            setTimeout(() => {
                if (JSON.stringify(self.timeOutObj) == '{}') {
                    self.loading = true
                    var num = 1;
                    self.setAdd = setInterval(function () {
                        var len = 95;//显示的长度
                        if (num >= len) {
                            clearInterval(self.setAdd)
                        } else {
                            num = parseInt(num, 10) + 1;
                        }
                        self.process = num + "%"
                    }, 20)
                }
            },5000)

下图的关闭定时器是针对法一，保存返回的的response数据是针对法二。