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

定义变量

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)
       }
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js