番禺做网站企业合肥seo网络优化公司

背景

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

如图所示，这个页面有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 = 0const clearI = () => {clearInterval(Interval)Interval = nullcurTime = 0this.loadingText = ''this.loading = false}if (!Interval) {this.loading = truelet isClear = await func()if (!isClear) returnInterval = 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 = falsethis.lockData(async () => {let response = await this.dataSync()return response})
},
async dataSync() {this.loading = truelet 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 = truelet response = await this.$axios.post('/xxxx/page', {xxxx})if (response.data.status === 0) {this.tableData = response.data.listthis.total = response.data.totalCountthis.$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>