使用JS，写了一个轮询发送请求的工具。

版本

• axios： ^1.2.0

• vue： 2

// 这里的内容是：封装的axios请求拦截器。
import axios from "./request";

/**
 * @Polling {轮询的实现}
 */
class Polling {
  constructor(second) {
    this.time = second * 1000;
    this.requests = [];
    this.finishCount = 0;
    this.__timer = null;
    this.__isStop = false;
  }
  /**
   * @注册需要轮询的多个请求
   * @param {Array} list 配置列表
   */
  registeredMore(list) {
    list.forEach((config) => {
      this.registered(config);
    });
  }
  /**
   * @注册单个请求
   * @param {Object} options
   * @param {options} method 请求方式
   * @param {options} url 请求路径
   * @param {options} data 请求参数
   */
  registered({ callback, method, url, data }) {
    const config = {
      method,
      url,
      callback,
    };
    const lowerMethod = method.toLowerCase();
    if (["get", "delete"].includes(lowerMethod)) {
      config.params = data;
    } else {
      config.data = data;
    }
    this.requests.push(config);
  }

  __handleCallbackFinishCount(res, callback) {
    this.finishCount += 1;
    callback(res);
    if (this.finishCount == this.requests.length) {
      this.finishCount = 0;
      this.startPolling();
    }
  }

  __sendRequests(config) {
    const { callback, ...payload } = config;
    const request = axios(payload);
    request
      .then((res) => this.__handleCallbackFinishCount(res.data, callback))
      .catch((err) => this.__handleCallbackFinishCount(err, callback));
  }

  /**
   * @立即发送全部请求
   */
  allSend() {
    this.requests.forEach((config) => {
      this.__sendRequests(config);
    });
  }

  /**
   * @开始定时器 > 一般用户初始化之后进行调用
   */
  startPolling() {
    if (this.__isStop) return;
    this.__timer = setTimeout(() => {
      this.allSend();
    }, this.time);
  }

  /**
   * @关闭轮询
   * @param {Boolean} isInstantOpen  true：在调用此方法时直接关闭， false：等待当前轮询周期结束关闭。
   */
  closePolling(isInstantClose = false) {
    if (isInstantClose == true && this.__timer != null) {
      clearTimeout(this.__timer);
    }
    this.__isStop = true;
  }
  /**
   * @打开轮询
   * @param {Boolean} isInstantOpen true：在调用此方法时直接发送请求， false：等待轮询的时长。
   */
  openPolling(isInstantOpen = false) {
    this.__isStop = false;
    if (isInstantOpen == true) {
      this.allSend();
    } else {
      this.startPolling();
    }
  }
}

function autoStart(polling, initRequestList) {
  polling.registeredMore(initRequestList);
  polling.allSend();
}

/**
 * 暴露给外部的接口
 * @param {*} second 时间/秒
 * @param {*} initRequestList  请求列表：如果数组中有内容，则自动开始执行。
 * @returns polling
 */

export function pollingEffect(second, initRequestList = []) {
  const polling = new Polling(second);
  if (initRequestList.length > 0) {
    autoStart(polling, initRequestList);
  }
  return {
    registeredMore: polling.registeredMore.bind(polling),
    registered: polling.registered.bind(polling),
    allSend: polling.allSend.bind(polling),
    startPolling: polling.startPolling.bind(polling),
    openPolling: polling.openPolling.bind(polling),
    closePolling: polling.closePolling.bind(polling),
  };
}

参数

• second：秒数（数字）

• 初始化的initRequestList<Object>，传入一个数组， 如果这个数组里面存在内容则自动开始轮询

• 如果不使用，第二个参数不传的情况下，不会自动开启轮询。

 const polling = pollingEffect(1, [
      {
        url: "后端的路径",
        method: "get",
        data: { time: new Date().getTime() }, // 参数 
        callback: (data) => {
          console.log(data);
        },
      },
    ]);
}

方法解析：

• registeredMore

• 初始化多个请求（配置）

• 参数

• Array<Object>

polling.registeredMore([
    {    
        url: "后端的路径01",
        method: "get",
        data: { time: new Date().getTime() }, // 参数 
        callback: (data) => {
          console.log(data);
        },
    },
    {    
        url: "后端的路径02",
        method: "get",
        data: { time: new Date().getTime() }, // 参数 
        callback: (data) => {
          console.log(data);
        },
     },
])

• registered

• 初始化一个请求，

• 参数

• Object

polling.registered({
    url: "后端的路径",
    method: "get",
    data: { time: new Date().getTime() }, // 参数 
    callback: (data) => {
      console.log(data);
    },
})

• allSend（）

• 立即发送请求（所有初始化过的请求）

polling.allSend()

• startPolling（）

• 开启定时器进行轮询。

polling.startPolling()

• openPolling（isInstantOpen）

• 打开轮询

• 参数

• isInstantOpen = true： 在调用此方法时直接发送请求。

• isInstantOpen = false：相当于重新调用startPolling方法（默认）。

polling.openPolling()

• closePolling（isInstantClose）

• 关闭轮询

• 参数

• isInstantClose = true： 在调用此方法时直接关闭。

• isInstantClose = false：等待当前轮询周期结束后关闭（默认）。

polling.closePolling()