版本
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()