@blueking/combine-request
v1.0.1
Published
合并请求通用工具类,适用于组件拆分但希望合并数据请求场景,同时可用于控制异步方法分片执行。
Downloads
30
Readme
combine-request
合并请求通用工具类,适用于组件拆分但希望合并数据请求场景,同时可用于控制异步方法分片执行。 理论上,此工具实现的是一个延时执行模型,即执行目标可以是异步请求或者任何普通函数,编排后的执行可由使用方自行处理。
安装
npm install @blueking/combine-request
使用
实例化
interface IDataItem {
id: number;
name: string;
}
const combineRequest = new CombineRequest<IDataItem[]>(
data => {
console.log(data); // 合并起来的所有参数数据
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, name: '1' }]);
}, 1000);
});
},
2, // 参数分段大小,可选
2, // 迸发大小,可选
);
单例模式,在同一组件中发起请求调用时非常有用
// 假设 comp.vue 中在页面中被使用10次,组件中存在以下调用
const combineRequestInstance = CombineRequest.setup<IDataItem[]>(Symbol.for('myCombineRequest'), data => {
console.log(data);
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, name: '1' }]);
}, 3000);
});
});
combineRequestInstance.add(Math.random())
// 最终将确保回调只执行1次,data参数为10个Math.random()元素数组
(10) [0.7344740349564569, 0.19415064068295118, 0.1062907681339258, 0.4052586915078804, ...]
getPromise 参数不分段、不控制迸发时使用
const combineRequest = new CombineRequest<IDataItem[]>(data => {
console.log(data);
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, name: '1' }]);
}, 1000);
});
});
combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)
let i = 4;
while (i < 10) {
combineRequest.add(i);
i++;
}
console.log(await combineRequest.getPromise());
// 收集到的所有参数
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 输出结果,1次完成调用
[
{
"id": 1,
"name": "1"
}
]
getSplitPromise 参数分段、不控制迸发时使用
const combineRequest = new CombineRequest<IDataItem[]>(data => {
console.log(data);
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, name: '1' }]);
}, 1000);
});
}, 2);
combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)
let i = 4;
while (i < 10) {
combineRequest.add(i);
i++;
}
for (const result of await combineRequest.getSplitPromise()) {
console.log(await result);
}
// 参数根据2个一组拆分,需要5次执行完成调用
(2) [1, 2]
(2) [3, 4]
(2) [5, 6]
(2) [7, 8]
[9]
// 对应5次执行的结果
[{…}]
[{…}]
[{…}]
[{…}]
[{…}]
getSlicePromise 参数分段、控制迸发时使用
const combineRequest = new CombineRequest<IDataItem[]>(
data => {
console.log(data);
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, name: '1' }]);
}, 3000);
});
},
2,
2,
);
combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)
let i = 4;
while (i < 10) {
combineRequest.add(i);
i++;
}
for (const q of await combineRequest.getSlicePromise()) {
console.time('time');
const x = await q;
for (const y of x) {
if (y.status === 'fulfilled') {
y.value.forEach(v => {
console.timeEnd('time');
console.log(v);
});
} else {
console.log(y.reason);
}
}
}
// 参数根据2个一组拆分,需要5次执行完成调用,但调用并不是一次性全部触发的,而是按2次一个迸发控制执行的
(2) [1, 2]
(2) [3, 4]
time: 3001.669189453125 ms
{id: 1, name: '1'}
{id: 1, name: '1'}
// 每次迸发2个,在上一次调用执行完成之后才继续下一次
(2) [5, 6]
(2) [7, 8]
time: 3000.383056640625 ms
{id: 1, name: '1'}
{id: 1, name: '1'}
[9]
time: 3001.5419921875 ms
{id: 1, name: '1'}
// waterfall示意
-----
-----
-----
-----
-----