js控制并发请求的最优解
思路：维护一个运行池，一个等待队列，出一个进一个，控制运行池的大小
<!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 执行【如果大家有其他实现方式请提供下，谢谢】
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: '辽宁省,沈阳市,法库县',},],},};
