前端对于请求去重方案

先在这里简单的写，保存起来

/**
 * 避免重复发送相同的请求(request是同一个对象，只会解析一次第二次解析会报错误)
 */
import responseInterceptor from "./responseInterceptor";

const pendingRequests = new Map(); // 缓存相同请求
const resultCache = new Map(); // 缓存请求结果数据
const cacheExpirationTime = 2000; // 缓存过期时间（以毫秒为单位）
const cacheCleanupInterval = 60000; // 缓存清理间隔时间（以毫秒为单位）

// 启动定时清理缓存的计时器
setInterval(cleanUpCache, cacheCleanupInterval);

function cleanUpCache() {
  const currentTime = Date.now();
  for (const [requestKey, cachedResult] of resultCache.entries()) {
    if (currentTime - cachedResult.timestamp >= cacheExpirationTime) {
      // 如果缓存数据已过期，从缓存中删除
      resultCache.delete(requestKey);
    }
  }
}

export default async function sendRequest(url, options) {
  // 使用请求URL和选项作为键来标识请求(这里的key还是有点问题，主要是json转化的问题)
  const requestKey = url + JSON.stringify(options);

  // 检查是否有缓存的结果
  const cachedResult = resultCache.get(requestKey);
  if (cachedResult) {
    // 如果缓存结果存在并未过期，直接返回缓存结果
    const currentTime = Date.now();
    if (currentTime - cachedResult.timestamp < cacheExpirationTime) {
      return cachedResult.data;
    } else {
      // 如果缓存数据已过期，从缓存中删除
      resultCache.delete(requestKey);
    }
  }

  // 检查是否已经有一个相同的请求在等待
  if (pendingRequests.has(requestKey)) {
    return pendingRequests.get(requestKey);
  }

  // 创建一个新的 Promise 对象，用于处理请求
  const requestPromise = new Promise(async (resolve, reject) => {
    try {
      // 发送请求
      const request = await fetch(url, options);
      // 响应拦截器
      const result = await responseInterceptor(request, { url, init: options });
      resolve(result); // 解决 Promise 并传递结果
      // 缓存结果
      resultCache.set(requestKey, { data: result, timestamp: Date.now() });
    } catch (error) {
      reject(error); // 拒绝 Promise 并传递错误
    } finally {
      // 请求完成后从 pendingRequests 中移除
      pendingRequests.delete(requestKey);
    }
  });

  // 将 Promise 存储在 pendingRequests 中
  pendingRequests.set(requestKey, requestPromise);

  return requestPromise;
}