前端
轮询
一、业务需求:后端是授权(企业数据)接口,授权成功与否需要等待的时间比较长,返回的时间在1-2分钟之间,所以前端设置等待状态,需要每间隔一段时间去获取一次授权结果
二、封装轮询代码块,这里使用 setTimeout
实现,要比 setInterval
更好一些
/**
* @descripting 轮询功能
* @param {Function} fn 网络请求方法
* @param {Object} data 网络请求参数
* @param {Number} delay 轮询间隔时间
*/
let timer = null
export function polling(fn, data, delay = 5000) {
return new Promise((resolve, reject) => {
fn(data).then(res => {
resolve(res)
}).catch(error => {
timer = setTimeout(() => {
resolve(polling(fn, data, delay = 5000));
}, delay)
})
})
}
export function clearPolling(){
clearTimeout(timer)
}
三、业务中使用,特别提醒的是,一定要记得清除定时器
/**
* 网络请求函数
* 判断-供应链授权结果
*/
export function getSellerChainAuth(data) {
return request({
url: '/report/rollback/getAuthResult',
method: 'post',
data
})
}
/**
* 轮询调用
*/
polling(getSellerChainAuth, { authKey: authStore.authKey }, 5000).then(res => {
httpSellerChainPDF(authStore.authKey, dueDiligenceStore.keyNo)
})
/**
* 在页面被销毁之前需要清除轮询,避免副作用
*/
onUnmounted(() => {
clearPolling()
})
四、推荐一个最近用过的网络请求库 VueRequest,兼容 Vue 2 & 3、所有数据都具有响应式、轮询请求、节流请求与防抖请求等等