js控制并发请求的最优解
思路：维护一个运行池，一个等待队列，出一个进一个，控制运行池的大小
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并发请求示例</title>
</head>
<body>
<script>
// 模拟请求
const requestFn = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 50);
})
}
const urlList = new Array(100).fill(requestFn)
const poll = new Set();
const waitQueue = [];
const request = url => {
return new Promise((res, rej) => {
const isFull = poll.size >= 10;
const fn = function fn(){
// const request = fetch(url);
const request = url();
request.finally(() => {
poll.delete(fn);
const next = waitQueue.shift();
next && poll.add(next);
setTimeout(() => next?.())
})
request.then(res)
request.catch(rej)
return request;
}
if (isFull) {
waitQueue.push(fn)
} else {
poll.add(fn);
fn();
}
})
}
for(let [index, url] of urlList.entries()) {
request(url).then(() => console.log("====", index))
}
</script>
</body>
</html>控制调用频率
工作中还有一种情况，非并发，是控制调用api的频率 需求： 数据库中存的2000多条地图经纬度数据有的不准确，所以想把所有的数据都重新获取重新刷一下，控制下调用百度地图api 的频率，每100毫秒调用一次，然后提交给接口进行保存。 实现方式： 使用setTimeout实现，延迟100毫秒 * index 执行【如果大家有其他实现方式请提供下，谢谢】
js
import waitData from './waitData.json'; // 所有待执行的数据，2000多条数据
let waitSaveData: any = [];
let successData: any = [];
let waitSaveErrInfo: any = [];
// 保存失败的数据文件，不含失败信息，方便再次尝试执行
function saveErrToFile() {
const blob = new Blob([JSON.stringify({ result: { records: waitSaveData } })], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'data.json';
link.click();
URL.revokeObjectURL(link.href);
}
// 保存失败的数据文件，含失败信息
function saveErrInfoToFile() {
const blob = new Blob([JSON.stringify(waitSaveErrInfo)], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'err.json';
link.click();
URL.revokeObjectURL(link.href);
}
// 保存成功的数据文件
function saveSuccessToFile() {
const blob = new Blob([JSON.stringify(successData)], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'err.json';
link.click();
URL.revokeObjectURL(link.href);
}
// 刷新数据方法
const refreshInfo = () => {
waitSaveData = [];
successData = [];
waitSaveErrInfo = [];
console.log('✨开始刷新数据✨', waitData.result.records);
const allDataLength = waitData.result.records.length;
waitData.result.records.forEach((item, index) => {
var bdary = new BMap.Boundary(); // 百度地图api，通过城市获取行政区域的经纬度数据
setTimeout(() => { // 定时器，延迟100毫秒 * index 执行
bdary.get(item.putGoodsPlace, function (rs) {
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) { // 获取失败，保存失败数据
console.info(item.putGoodsPlace + '未能获取当前输入行政区域');
waitSaveData.push(item);
waitSaveErrInfo.push({ ...item, err: '未能获取当前输入行政区域' });
return;
}
var boundLngLat = JSON.stringify(rs.boundaries);
var lngLat = '';
for (var i = 0; i < count; i++) {
lngLat += rs.boundaries[i] + ';';
}
lngLat = lngLat.substring(0, lngLat.length - 1);
// 要提交接口的数据
const data = {
lngLat,
boundLngLat,
type: '1',
figureType: '1',
targetPlaceCode: item.targetPlaceCode,
targetPlaceName: item.targetPlaceNameCp,
enclosureName: item.enclosureName,
putGoodsPlace: item.putGoodsPlace,
warehouseName: item.warehouseName,
longLatCode: item.longLatCode,
};
saveData(data)
.then(() => {
successData.push(item);
})
.catch((err) => {
console.log('✨file:index.vue:211✨✨', err.message);
waitSaveData.push(item);
waitSaveErrInfo.push({ data: { ...data, lngLat: '请查看请求', boundLngLat: '请查看请求' }, err: err.message });
});
// 打印索引，方便查看执行进度
if (index % 50 === 0) {
console.log('当前索引', index);
}
if (index === allDataLength - 1) {
console.log('✨执行完毕✨', index);
}
});
}, 100 * index);
});
};waitData.json 文件格式如下：
{
success: true,
message: '操作成功',
code: 200,
result: {
records: [
{
longLatCode: 'BWL000000002058863',
enclosureName: '广东省韶关市南雄市',
putGoodsPlace: '广东省韶关市南雄市',
type: '1',
isUser: '1',
warehouseName: '',
radius: '',
figureType: '1',
targetPlaceCode: '440000,440200,440200',
targetPlaceNameCp: '广东省,韶关市,南雄市',
},
{
longLatCode: 'BWL000000002058511',
enclosureName: '辽宁省沈阳市法库县',
putGoodsPlace: '辽宁省沈阳市法库县',
type: '1',
isUser: '1',
warehouseName: '',
radius: '',
figureType: '1',
targetPlaceCode: '210000,210100,210100',
targetPlaceNameCp: '辽宁省,沈阳市,法库县',
},
],
},
};