当网站上出现大量重复请求的时候应该把重复请求进行合并成一个请求
封装hooks
const promiseMap = new Map();
export async function merge(key: any, requestFn: any, ...args: any[]) {
console.log(promiseMap);
//动态生成key
let cacheKey =
args.length > 0 ? JSON.stringify(`${key}-${args.join("-")}`) : key;
// 如果已经有相同的请求正在进行,直接返回该请求的 Promise
if (promiseMap.has(cacheKey)) {
return promiseMap.get(cacheKey);
}
try {
// 发起请求并将 Promise 存入 Map
const promise = args.length > 0 ? requestFn(...args) : requestFn();
promiseMap.set(cacheKey, promise);
// 等待请求完成
const res = await promise;
// 请求完成后,将结果存入 Map
promiseMap.set(cacheKey, res.data);
// 返回结果
return res.data;
} catch (error) {
// 如果请求失败,从 Map 中移除该 key
promiseMap.delete(cacheKey);
throw error; // 抛出错误
}
}
组件使用