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