axios構建緩存池存儲基礎數據

項目中經常出現需要多次使用的后端數據，通常的做法是通過變量緩存數據，或者通過類似vuex的東西來進行緩存，但是麻煩在於很可能需要判斷一大堆的條件，或者說如果有權限控制的時候數據能否讀取也是很麻煩的事情

所以這里提供一個比較簡單的解決方案，通過在對象中存儲請求路徑以及參數甚至是token，然后攔截發起的請求，然后判斷從緩存中讀取數據還是重新請求數據

import axios from 'axios'

//創建axios實例化對象且配置部分默認參數
const http = axios.create({
  baseURL: '/api/v2',    //默認域名
  timeout: 80000,    //超時限制
  withCredentials: true,    //跨域時使用憑證，默認帶上cookies
  headers: {    //默認配置請求頭，請求格式為application/json
    'Content-Type': 'application/json;charset=UTF-8',
    Accept: 'application/json'
  }
});

// 緩存
// 緩存存儲格式：get和post請求數據單獨分為兩個對象，分別存儲url+params的拼接結果作為key值，緩存值作為value
const cache = {get: {}, post: {}};

/*
* 對象key值排序方法，保證不同順序的key值對比有效
*/
function objKeySort(obj) {
    var newkey = Object.keys(obj).sort();
　　//先用Object內置類的keys方法獲取要排序對象的屬性名，再利用Array原型上的sort方法對獲取的屬性名進行排序，newkey是一個數組
    var newObj = {};//創建一個新的對象，用於存放排好序的鍵值對
    for (var i = 0; i < newkey.length; i++) {//遍歷newkey數組
        newObj[newkey[i]] = obj[newkey[i]];//向新創建的對象中按照排好的順序依次增加鍵值對
    }
    return newObj;//返回排好序的新對象
}


// 重載axios的方法
// put和delete方法不提供緩存
class newHttp {
  constructor() {
    this.http = http
  }
  get(url, params, isCache) {
    if (isCache) {
      let cacheurl = url.charAt(0) == '/' ? url : '/' + url;
      let cacheObj = {};
　　　　// get請求參數可能存在於url中，所以單獨處理一次
      if(/\?/.test(cacheUrl)) {
          let tempArr = cacheUrl.match(/\?(.*)$/)[1];
          tempArr.forEach(v => {
            let temp = v.split('=');
            cacheObj[temp[0]] = cacheObj[temp[1]];
          });
          cacheUrl = cacheUrl.match.match(/^(.*)(?=\?)/)[0];
      }
      Object.assign(cacheObj, params ? params: {});
      let cacheParams = cacheurl + JSON.stringify(objKeySort(cacheObj));
      if (cache.get[cacheParams]) {
        return new Promise((reslove, reject) => {
          reslove(Object.assign({}, cache.get[cacheParams]));
        })
      } else {
        return this.http.get(cacheUrl, cacheObj).then(res => {
          cache.get[cacheParams] = res;
          return res;
        });
      }
    } else {
      return this.http.get(cacheUrl, cacheObj);
    }
  }
  post(url, params, isCache) {
    if (isCache) {
      let cacheurl = url.charAt(0) == '/' ? url : '/' + url;
      let cacheObj = {};
      Object.assign(cacheObj, params ? params: {});
      let cacheParams = cacheurl + JSON.stringify(objKeySort(cacheObj));
      if (cache.post[cacheParams]) {
        return new Promise((reslove, reject) => {
          reslove(Object.assign({}, cache.post[cacheParams]));
        })
      } else {
        return this.http.post(cacheUrl, cacheObj).then(res => {
          cache.post[cacheParams] = res;
          return res;
        });
      }
    } else {
      return this.http.post(cacheUrl, cacheObj);
    }
  }
  put(url, params) {
    return this.http.put(url, params);
  }
  delete(url, params) {
    return this.http.delete(url, params);
  }
  all(arg) {
    return Promise.all(arg);
  }
}

const utilHttp = new newHttp();

  export { utilHttp, cache }