vue持续性拉取后台数据

需求

当用户进行操作后会向后台请求数据，但数据并不是一次性返回，需要返回一部分就显示一部分。
后台的数据是从别的地方拉取过来的，持续不断的拉取，所以我只需要当后台拉取数据的时候，不停的调用显示数据的接口。

代码

数据拉取中

data () {
    return {
        taskStatus: '',
        dataTimer: null,
    }
},
created () {
    // 是否开启定时器
    if (this.taskStatus === '数据拉取中') {        
        this.dataTimer = setInterval(() => {
            // 返回一个状态，如果不是数据拉取中则停止定时器，停止拉取数据
            this.judgeStatus()
            // 返回的数据渲染到页面
            this.showData()            
        }, 5000)
    }
},
destroyed () {
    clearInterval(this.dataTimer)
},
methods: {
    judgeStatus () {
        axios.get('/judgeStatus').then((res) => {
            if (res.status === 200) {
                this.taskStatus = res.data.taskStatus
                if (res.data.taskStatus !== '数据拉取中') {
                    clearInterval(this.dataTimer)
                    this.showData()
                }
            }            
        }).catch((error) => {
            console.log(error);
        })
    }
}

定时器

// 设置
setInterval(function, milliseconds);
// 清除
clearInterval(id_of_setinterval)

相关阅读

vue判断用户在页面停留时间是否超时

网站导航

网站导航