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 }