【技巧】前端开发技巧增加前端的请求缓存提高开发效率

我是Superman丶2023-11-24 10:52

定义变量

javascript 复制代码

/**
 * 开发缓存 开关
 * 说明
 *      方便开发使用 提升开发效率
 * true  打开缓存
 * false  关闭缓存   这里上线的时候必须改为
 * @type {boolean}
 */
const cacheFlag = true

/**
 * 排除某个url 方便开发时的数据实时生效
 * 这里根据开发到哪个功能 实时变更， 比如开发
 *      添加 修改 删除 功能等。。。
 *      一般多用于查询
 *      url 开启缓存之后 可以通过F12浏览器 控制台查看 或者 网络 一定要匹配上
 *      或者某个请求缓存遇到异常时 可以加入这里
 * @type {string[]}
 */
const cachePaichuUrl = [
    '',
    '',
    '',
]

复制代码

包装
axios.js

javascript 复制代码

//原始的request
 const baseRequest = axios.create({
   baseURL: baseUrl,
 })






/**
 * 做一层包装 方便单独处理
 * @param params
 * @returns {AxiosPromise}
 */
 const request = (params)=>{

     //判断是否走缓存
     if(cacheFlag === true){
         console.log('request:', params)
         let url = params.url
         let data = params.data
         let all = {
             url:url,
             data:data
         }
         //加密MD5
          let 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 => {

在成功的时候将加过加入到缓存里

javascript 复制代码

       if(cacheFlag === true){
            let url= res.config.url
           let data = res.config.data
           if(data){
               data = JSON.parse(data)
           }
           let all = {
               url:url,
               data:data
           }
//加密MD5
           let keyMd5 = md5(JSON.stringify(all))
           // console.log('响应url:', url, keyMd5, all)
//设置缓存 可以用 localStore.set()
           setStore('cache-'+keyMd5, res)
       }

【技巧】前端开发技巧 增加前端的请求缓存 提高开发效率

【技巧】前端开发技巧增加前端的请求缓存提高开发效率