背景
试想在一个需要频繁更新数据的场景(例如:监控、图表类),常规方法是设置一个间隔 N 秒的定时器 setInterval
;但是这种方式存在一个问题,当前一个请求时间过长时(超过了间隔时间),后一个请求的接口响应会先于前一个请求,也就是说,将导致旧的数据渲染会覆盖新的数据渲染。
解决方案
利用 Array.reduce
的迭代性,注册异步(Async)的匿名函数,在函数内部将网络请求封装成 Promise 实例,在整个迭代周期中等待(Await)前一个请求完成以后再请求后一个请求,完成一个请求周期以后递归调用自己,开启新的一轮一模一样的请求周期,模拟不间断的依次网络请求。
// 模拟网络请求
function simulateRequest () {
const time = 1000;
return new Promise(resolve => setTimeout(() => {
resolve();
console.log(`模拟请求花费 ${time}ms`);
}, time));
}
// 循环顺序请求
function cycleRequest () {
console.log('新的一轮开始请求');
// 一个请求周期,这边为了模拟方便长度为 10,实际情况可能是 10000 或 99999 这样的
const arr = new Array(10).fill(undefined);
arr.reduce(async (last, curr, index) => {
await last;
return simulateRequest()
.then(() => {
if (index + 1 === arr.length) {
// 完成一轮后重复
cycleRequest();
}
});
}, undefined);
}
// 启动
cycleRequest();
结果打印:
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
...
版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:https://blog.mazey.net/2317.html
(完)