当前位置: 首页 > article >正文

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

定义变量

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

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

//原始的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 => {

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

       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)
       }


http://www.kler.cn/a/146159.html

相关文章:

  • Android SystemUI——CarSystemBar添加到窗口(十)
  • Android系统开发(一):AOSP 架构全解析:开源拥抱安卓未来
  • TextButton组件的功能与用法
  • JEL分类号
  • springboot基于微信小程序的传统美食文化宣传平台小程序
  • Dubbo泛化调用
  • Stable-Diffusion——Windows部署教程
  • 【Ambari】HDP单机自动化安装(基础环境和MySQL脚本一键安装)
  • 【ARM 嵌入式 编译 Makefile 系列 18 -- Makefile 中的 export 命令详细介绍】
  • 常用脚本-持续更新(文件重命名、视频抽帧、拆帧、删除冗余文件、yolo2xml、转换图片格式、修改xml)
  • ESXi 添加虚拟闪存 无可选设备问题排查
  • 优秀的时间追踪软件Timemator for Mac轻松管理时间!
  • 『Linux升级路』基础开发工具——make/Makefile
  • MFC 发布CLXHHandleEngine动态库1.0.0.0版本
  • 独乐乐不如众乐乐(二)-某汽车零部件厂商IC EMC企业规范
  • EM32DX-C1【分布式io】
  • Android YUV存储方式
  • 通过视频文件地址截取图像生成图片保存为封面图
  • Kotlin学习——kt中的类,数据类 枚举类 密封类,以及对象
  • HTML新手入门笔记整理:HTML常用标签总结表
  • Redis key的类型以及命令
  • nginx配置及理解
  • 浅谈基于EIoT能源物联网的工厂智能照明系统应用改造
  • 【开源】基于JAVA的在线课程教学系统
  • 文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑氢储一体化协同的综合能源系统低碳优化》
  • 单片机学习3——数码管