http緩存,普通對象緩存

這裏說的http緩存是指在前端同時發起很多api和參數都相同的get請求，特別是在map for 循環裏，一個組件被循環多次，它裏面的接口也會多次重複請求，那麼在短時間內多次發重複請求 肯定是性能不友好的，所以我做了一個緩存，代碼如下

/**做得默認6s緩存 */
class CacheHttp {
  time = 6 * 1000;

  retPromiseMap = new Map();

  http(api, param, httpInstance) {
    const key = getHash(api + JSON.stringify(param));

    const cacheData = this.retPromiseMap.get(key);
    const setPromise = () => {
      //發出真實的http請求，緩存promise 用map儲存 下一次用
      let ret = httpInstance(api, param);
      const temp = {
        startTime: new Date().getTime(),
        retPromise: ret,
        isFinish: false, //記錄promise是否已經是完成狀態了 如果是完成狀態 就要重新發請求
      };
      ret &&
        ret.finally(() => {
          temp.isFinish = true;
        });
      this.retPromiseMap.set(key, temp);

      return ret;
    };
    //說明還沒有緩存過
    if (!cacheData) {
      return setPromise();
    }
    if (new Date().getTime() - cacheData.startTime <= this.time && cacheData.isFinish === false) {
      console.log('http緩存發生作用');
      return cacheData.retPromise;
    } else {
      //說明緩存過期了
      return setPromise();
    }
  }
}

function getHash(str) {
  var hash = 0,
    i,
    chr;
  if (str.length === 0) return hash;
  for (i = 0; i < str.length; i++) {
    chr = str.charCodeAt(i);
    hash = (hash << 5) - hash + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
}

下面是使用舉例

const cacheHttp = new CacheHttp();
   cacheHttp.http(Apis.findSubNavList, { current: 1, pageSize: 1000, ...param }, httpGet).then((res) => {
   
    });