Promise + Async&Await + Array.reduce + 函数递归 解决网络/接口请求的依次/排队不间断间隔访问

背景

试想在一个需要频繁更新数据的场景（例如：监控、图表类），常规方法是设置一个间隔 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
ad8

模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
...

版权声明

本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：https://blog.mazey.net/2317.html

（完）