[记录存档] 前端实现请求队列
新建文件： handleQueue.js
import axios from 'axios';
/**
* 处理请求队列的函数，具有最大并发限制。
*
* @param {Array} reqs - 请求函数数组。
* @param {number} maxConcurrency - 最大并发请求数。
*/
export const handleQueue = async (reqs, maxConcurrency = 6) => {
reqs = reqs || [];
const requestQueue = () => {
const queue = [];
let current = 0;
const dequeue = async () => {
while (current < maxConcurrency && queue.length) {
current++;
const requestPromiseFactory = queue.shift();
try {
await requestPromiseFactory();
} catch (error) {
console.log(error);
} finally {
current--;
dequeue();
}
}
};
return (requestPromiseFactory) => {
queue.push(requestPromiseFactory);
dequeue();
};
};
const enqueue = requestQueue();
for (let i = 0; i < reqs.length; i++) {
enqueue(async () => await axios.get(`/api/test${i}`));
}
};使用示例：
// 引入 axios 和 handleQueue 函数
import axios from 'axios';
import { handleQueue } from './path/to/handleQueue';
// 创建一个请求函数数组
const requests = [
() => axios.get('/api/test1'),
() => axios.get('/api/test2'),
() => axios.get('/api/test3'),
() => axios.get('/api/test4'),
// 添加更多请求
];
// 调用 handleQueue 函数
handleQueue(requests, 4) // 这里设置最大并发数为 4
.then(() => {
console.log('所有请求已完成');
})
.catch(error => {
console.log('发生错误:', error);
});
