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
...

版权声明

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

(完)

上一篇:2021/12/6


下一篇:async_await函数的使用小案例