背景
试想在一个需要频繁更新数据的场景（例如：监控、图表类），常规方法是设置一个间隔 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
...
版权声明
本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：blog.mazey.net/2317.html
（完）
