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

定义变量

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)
       }
相关推荐
Mintopia3 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了6 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia7 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
GISer_Jing13 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞28 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多32 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪32 分钟前
CSS基础语法
前端
冰暮流星33 分钟前
css之box-sizing属性
前端·javascript·css
倚肆36 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css
华洛39 分钟前
聊一下如何稳定的控制大模型的输出格式
前端·产品经理·ai编程