定義變量
/*** 開發緩存 開關* 說明* 方便開發使用 提升開發效率* 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)}