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
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
...

后除

View posts by 后除
Mazey's blog.

发表评论

您的电子邮箱地址不会被公开。