背景

众所周知，后端是处理不了复杂的任务的，所以经过人家的技术讨论之后，把业务放在前端来实现。记录一下这次的离大谱需求吧。

如图所示，这个页面有5个列表，默认加载计划列表。但是由于后端的种种原因，这个列表接口不能直接调取。

要先调一个查询状态的接口，每 3s 轮询一次，如果返回的计划状态字段campaign为 true，说明此时后端已经准备好实时数据了，才可以调列表page接口。

如果 30s 的时候还没为 true，表格的加载文案显示为“数据量较大，拼命加载中，请耐心等待”。

如果 2min 的时候还没为 true，停止轮询，表格的加载文案显示为“数据量较大，加载超时，请稍后”，提供一个重试按钮。

实现思路

首先定义一个全局变量-定时器。

在页面初始化的时候，加载loadData方法，如果定时器存在，清除定时器，防止污染。

定义一个方法lockData，在loadData函数中调用，这个方法的参数为一个异步函数的处理结果，这个异步函数就是查询状态，如果返回的计划状态为真，则调取列表接口，return false，否则return 接口的响应结果（一个对象）

在lockData方法中，定义一个秒数参数curTime，再定义清除定时器的方法。如果定时器不存在，先接收参数，看看查询结果是什么。如果这个参数为 false ，说明之前查询状态的结果是真已经直接调page接口了，此时直接return，结束方法。否则，开启定时器，秒数自增，如果秒数能整除3，且参数存在，调取参数，拿到返回结果，如果结果为 false，则清除定时器。如果curTime 大于200，清除定时器，让表格显示超时样式。

代码如下：

async lockData(func) {
    let curTime = 0
    const clearI = () => {
        clearInterval(Interval)
        Interval = null
        curTime = 0
        this.loadingText = ''
        this.loading = false
    }
    if (!Interval) {
        this.loading = true
        let isClear = await func()
        if (!isClear) return
        Interval = setInterval(async () => {
            curTime++
            if (curTime >= 30) {
                this.loadingText = '数据量较大，拼命加载中，请耐心等待'
            }
            if (curTime % 3 === 0) {
                if (func) {
                    let isClear = await func()
                    console.log('lockData', { curTime, isClear })
                    if (!isClear) clearI()
                }
            }
            if (curTime >= 120) {
                clearI()
                this.tableData = []
                this.timeOutEmpty = true
            }
        }, 1000)
        this.$once('hook:beforeDestroy', () => {
            clearInterval(Interval)
        })
    }
},
async loadData() {
    if(Interval) {
        clearInterval(Interval)
        Interval = null
    }
    this.timeOutEmpty = false
    this.lockData(async () => {
        let response = await this.dataSync()
        return response
    })
},
async dataSync() {
    this.loading = true
    let response = await this.$axios.post('/xxxxx/baseToday', {xxxx})
    if (response.data.status === 0 && response.data.data['campaign']) {
        await this.getData()
        return false
    }
    return response
},
async getData() {
    this.loading = true
    let response = await this.$axios.post('/xxxx/page', {xxxx})
    if (response.data.status === 0) {
        this.tableData = response.data.list
        this.total = response.data.totalCount
        this.$emit('changeTotal', {
            key: 'campaignNum',
            value: this.total
        })
    }
    this.loading = false
}

<div slot="empty">
    <div v-if="timeOutEmpty">
        <span>数据量较大，加载超时，请稍后
            <el-button @click="loadData" type="text">重试</el-button>
        </span>
    </div>
    <span v-else>暂无数据</span>
</div>