import { InternalAxiosRequestConfig } from 'axios'
type Queue = {
config: InternalAxiosRequestConfig;
resolve: (value: InternalAxiosRequestConfig | PromiseLike<InternalAxiosRequestConfig>) => void;
}
export default class AxiosQueue {
waitQueue: Queue[] = [];
runQueue: Queue[] = [];
LIMIT_QUEUE: number = 6;
constructor (LIMIT_QUEUE: number) {
this.LIMIT_QUEUE = LIMIT_QUEUE
}
public doRunQueue() {
if (this.runQueue.length < this.LIMIT_QUEUE && this.waitQueue.length) {
const doingRequest = this.waitQueue.shift();
doingRequest?.resolve(doingRequest.config)
if(doingRequest) this.runQueue.push(doingRequest)
}
}
public handleResponse (url?: string) {
if (!url) return;
const index = this.runQueue.findIndex(queue => queue?.config.url === url)
this.runQueue.splice(index, 1)
this.doRunQueue()
}
public useConfig (config: any) {
return new Promise(resolve => {
this.waitQueue.push({config, resolve})
this.doRunQueue()
})
}
}
##axios请求队列示例
import AxiosQueue from '...'
# limit_num 定义并发限制数 默认写的6个
const limit_num = 6
const axiosQueue = new AxiosQueue(limit_num)
request.use(
config => {
...,
return axiosQueue.useConfig(config)
}
)
response.use(
response => {
const { config } = response
axiosQueue.handleResponse(config.url)
},
error => {
const url = error.config.url
axiosQueue.handleResponse(url)
}
)