我想限制请求的数量,但也将它们搁置起来,直到 API 允许为止,所以我认为最好的选择是以 FIFO 顺序依次运行它们,它们之间有 1 秒的延迟,所以我这样做不超过 1 分钟内 60 个请求的要求。我也在考虑让他们同时运行其中一些,但在这种情况下,一旦达到限制,等待时间可能会很长。
然后我创建了两件事:
'useDiscogsFetch' 钩子
- 将所有 API 调用作为 Promise 发送到队列,而不是直接进行调用。
- 它还会生成一个 UUID 来标识请求,以便能够在需要时取消它。为此我使用了uuid npm 包.
使用DiscogsFetch.js
import { useEffect, useRef, useState } from 'react';
import DiscogsQueue from '@/utils/DiscogsQueue';
import { v4 as uuidv4 } from 'uuid';
const useDiscogsFetch = (url, fetcher) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const requestId = useRef();
const cancel = () => {
DiscogsQueue.removeRequest(requestId.current);
}
useEffect(() => {
requestId.current = uuidv4();
const fetchData = async () => {
try {
const data = await DiscogsQueue.pushRequest(
async () => await fetcher(url),
requestId.current
);
setData(data)
} catch (e) {
setError(e);
}
};
fetchData();
return () => {
cancel();
};
}, [url, fetcher]);
return {
data,
loading: !data && !error,
error,
cancel,
};
};
export default useDiscogsFetch;
DiscogsQueue 单例类
- 它将把任何收到的请求放入数组中。
- 请求将一次处理一个,请求之间有 1 秒的超时时间,始终从最早的请求开始。
- 它还有一个删除方法,该方法将搜索 id 并从数组中删除请求。
DiscogsQueue.js
class DiscogsQueue {
constructor() {
this.queue = [];
this.MAX_CALLS = 60;
this.TIME_WINDOW = 1 * 60 * 1000; // min * seg * ms
this.processing = false;
}
pushRequest = (promise, requestId) => {
return new Promise((resolve, reject) => {
// Add the promise to the queue.
this.queue.push({
requestId,
promise,
resolve,
reject,
});
// If the queue is not being processed, we process it.
if (!this.processing) {
this.processing = true;
setTimeout(() => {
this.processQueue();
}, this.TIME_WINDOW / this.MAX_CALLS);
}
}
);
};
processQueue = () => {
const item = this.queue.shift();
try {
// Pull first item in the queue and run the request.
const data = item.promise();
item.resolve(data);
if (this.queue.length > 0) {
this.processing = true;
setTimeout(() => {
this.processQueue();
}, this.TIME_WINDOW / this.MAX_CALLS);
} else {
this.processing = false;
}
} catch (e) {
item.reject(e);
}
};
removeRequest = (requestId) => {
// We delete the promise from the queue using the given id.
this.queue.some((item, index) => {
if (item.requestId === requestId) {
this.queue.splice(index, 1);
return true;
}
});
}
}
const instance = new DiscogsQueue();
Object.freeze(DiscogsQueue);
export default instance;
我不知道这是否是最好的解决方案,但它可以完成工作。