定义变量
/*** 开发缓存 开关* 说明* 方便开发使用 提升开发效率* true 打开缓存* false 关闭缓存 这里上线的时候必须改为* @type {boolean}*/
const cacheFlag = true/*** 排除某个url 方便开发时的数据实时生效* 这里根据开发到哪个功能 实时变更, 比如开发* 添加 修改 删除 功能等。。。* 一般多用于查询* url 开启缓存之后 可以通过F12浏览器 控制台查看 或者 网络 一定要匹配上* 或者某个请求缓存遇到异常时 可以加入这里* @type {string[]}*/
const cachePaichuUrl = ['','','',
]
包装 axios.js
//原始的requestconst baseRequest = axios.create({baseURL: baseUrl,})/*** 做一层包装 方便单独处理* @param params* @returns {AxiosPromise}*/const request = (params)=>{//判断是否走缓存if(cacheFlag === true){console.log('request:', params)let url = params.urllet data = params.datalet all = {url:url,data:data}//加密MD5let keyMd5 = md5(JSON.stringify(all))console.log(keyMd5)//判断排除的url是否包含if(cachePaichuUrl.includes(url) === false){let cache = getStore({ name: 'cache-'+keyMd5 })if(cache){console.log('走缓存:', cache);return new Promise((resolve, reject)=>{resolve(cache)})}}}return baseRequest(params);}
//HTTPresponse拦截 baseRequest.interceptors.response.use(res => {
在成功的时候 将加过加入到缓存里
if(cacheFlag === true){let url= res.config.urllet data = res.config.dataif(data){data = JSON.parse(data)}let all = {url:url,data:data}
//加密MD5let keyMd5 = md5(JSON.stringify(all))// console.log('响应url:', url, keyMd5, all)
//设置缓存 可以用 localStore.set()setStore('cache-'+keyMd5, res)}