js缓存接口数据并设置有效时间

为什么要做这个东西？

项目中一个组件会在useEffect中请求Options数据，最近做了一个新需求，一个页面中会复用这个组件好几次，就导致一个接口会重复请求好几次，入参也不尽相同，所以封装了一个函数用来处理这种情况。函数缓存每一个请求的返回的数据，并且在遇到相同路径相同入参的请求时直接返回缓存的数据而不请求接口，否则请求接口更新缓存数据。缓存有效期到了以后清除整个缓存池。

代码

xport function CreateCachePool(cacheControl = 5000) {
  const pool = new Map();
  let timeout = null;
  return async (url, params) => {
    if (cacheControl) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
      //缓存到期后清除缓存，以便于更新数据
        pool.clear();
      }, cacheControl);
    }
    //gei请求入参不会过于复杂，可以简单的转为json作为key值缓存对应数数据
    const key = `${url}${JSON.stringify(params)}`;
    let data = pool.get(key);

    if (!data) {
    //request可以替换为其他请求库
      data = request(url, params).catch(() => {
        pool.delete(key);
      });
      pool.set(key, data);
    }
    return data;

使用方法

//生成缓存池，入参有一个，为缓存有效时间
const cache=CreateCachePool(cacheControl )

//请求接口
const fetchData=asncy function(){
 const res = await cache(url,params)
}