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 }

巴特西

axios构建缓存池存储基础数据

最新文章

热门文章