【技巧】前端開發技巧 增加前端的請求緩存 提高開發效率

定義變量

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/164979.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/164979.shtml
英文地址,請注明出處:http://en.pswp.cn/news/164979.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

京東數據分析(京東大數據):2023年10月京東手機行業品牌銷售排行榜

鯨參謀監測的京東平臺10月份手機市場銷售數據已出爐! 根據鯨參謀平臺的數據顯示,今年10月份,京東平臺手機行業的銷量約340萬,環比增長約11%,同比則下滑約2%;銷售額為108億,環比增長約17%&#x…

請你說一下Vue中v-if和v-for的優先級誰更高

v-if 與 v-for簡介 v-ifv-forv-if & v-for使用 v-if 與 v-for優先級比較 vue2 中,v-for的優先級高于v-if 例子進行分析 vue3 v-if 具有比 v-for 更高的優先級 例子進行分析 總結 在vue2中,v-for的優先級高于v-if在vue3中,v-if的優先級高…

RubyMine 2023:提升Rails/Ruby開發效率的強大利器

在Rails/Ruby開發領域,JetBrains RubyMine一直以其強大的功能和優秀的性能而備受開發者的青睞。現如今,我們迎來了全新的RubyMine 2023版本,它將為開發者們帶來更高效的開發體驗和無可比擬的工具支持。 首先,RubyMine 2023提供了…

Java-使用poi-tl根據word模板動態生成word

作者wangsz&#xff0c;想寫一些關于word的工具&#xff0c;所以就寫了這篇文章 1.首先&#xff0c;先導入所需要的依賴&#xff08;poi相關依賴即可&#xff09; <!-- POI --><dependency><groupId>org.apache.poi</groupId><artifactId>poi&l…

【libGDX】使用Mesh繪制立方體

1 前言 本文主要介紹使用 Mesh 繪制立方體&#xff0c;讀者如果對 Mesh 不太熟悉&#xff0c;請回顧以下內容&#xff1a; 使用Mesh繪制三角形使用Mesh繪制矩形使用Mesh繪制圓形 在繪制立方體的過程中&#xff0c;主要用到了 MVP &#xff08;Model View Projection&#xff0…

目標檢測YOLO系列從入門到精通技術詳解100篇-【目標檢測】計算機視覺(最終篇)

目錄 知識儲備 KITTI數據集 1.KITTI數據集概述 2.數據采集平臺 3.Dataset詳述 算法原理

GIT無效的源路徑/URL

ssh-add /Users/haijunyan/.ssh/id_rsa ssh-add -K /Users/haijunyan/.ssh/id_rsa

windows11上enable WSL

Windows電腦上要配置linux&#xff08;這里指ubuntu&#xff09;開發環境&#xff0c;主要有三種方式&#xff1a; 1&#xff09;在windows上裝個虛擬機&#xff08;比如vmware&#xff09;。缺點是vmware加載ubuntu后系統會變慢很多&#xff0c;而且需要通過samba來實現window…

git clone -mirror 和 git clone 的區別

目錄 前言兩則區別git clone --mirrorgit clone 獲取到的文件有什么不同瘦身倉庫如何選擇結語開源項目 前言 Git是一款強大的版本控制系統&#xff0c;通過Git可以方便地管理代碼的版本和協作開發。在使用Git時&#xff0c;常見的操作之一就是通過git clone命令將遠程倉庫克隆…

【vue2】axios請求與axios攔截器的使用詳解

&#x1f973;博 主&#xff1a;初映CY的前說(前端領域) &#x1f31e;個人信條&#xff1a;想要變成得到&#xff0c;中間還有做到&#xff01; &#x1f918;本文核心&#xff1a;當我們在路由跳轉前與后我們可實現觸發的操作 【前言】ajax是一種在javaScript代碼中發請…

低代碼開發與IT開發的區別

目錄 一、含義不同 二、開發門檻不同 三、兩者之間的區別 1、從技術特征來看 2、從目標開發者來看 四、低代碼平臺使用感受&#xff1f; &#xff08;1&#xff09;自定義模塊&#xff0c;滿足不同的業務需求 &#xff08;2&#xff09;工作流引擎&#xff0c;簡化復雜流程的管…

機器學習實戰-第4章 基于概率論的分類方法: 樸素貝葉斯

樸素貝葉斯 概述 貝葉斯分類是一類分類算法的總稱,這類算法均以貝葉斯定理為基礎,故統稱為貝葉斯分類。本章首先介紹貝葉斯分類算法的基礎——貝葉斯定理。最后,我們通過實例來討論貝葉斯分類的中最簡單的一種: 樸素貝葉斯分類。 貝葉斯理論 & 條件概率 貝葉斯理論 …

linux網絡之網絡層與數據鏈路層

文章目錄 一、網絡層 1.IP協議 2.IP協議頭格式 3.網段劃分 4.特殊ip地址 5.IP地址的數量限制 6.私有ip和公網IP 7.路由 二、數據鏈路層 1.以太網 2.以太網幀格式 3.MAC地址 4.對比理解MAC地址和IP地址 5.MTU 6.ARP協議 ARP協議的工作流程 ARP數據報的格式 7.DNS 8.ICMP協議 9.N…

839 - Not so Mobile (UVA)

題目鏈接如下&#xff1a; Online Judge 這道題劉汝佳的解法極其簡潔&#xff0c;用了20來行就解決了問題。膜拜…… 他的解法如下&#xff1a;天平&#xff08;UVa839紫書p157&#xff09;_天平 uva 839_falldeep的博客-CSDN博客 我寫了兩個&#xff08;都很冗長&#xff…

淺談電氣設備的絕緣在線監測與狀態維修探究

賈麗麗 安科瑞電氣股份有限公司 上海嘉定 201801 摘要&#xff1a;在線監測是控制好電氣設備絕緣的重要方式&#xff0c;為電力系統穩定奠定重要基礎。在線監測電氣設備時&#xff0c;要利用檢測技術促進電力系統運行效率提升&#xff0c;讓電氣設備在具體工作過程中發揮更大作…

升級jdk17過程中,原來的jdk8下的webservice客戶端怎樣處理

背景&#xff1a;之前jdk8環境下&#xff0c;使用的cxf框架&#xff0c;而且是動態加載解析作為客戶端。大家一直相處的很愉快。但是最近升級jdk17&#xff0c;發現cxf不好用了。網上百度&#xff0c;大部分都是說升級cxf版本&#xff0c;并且添加jaxb的相關依賴就可以了。但是…

在線接口測試工具fastmock使用

1、fastmock線上數據模擬器 在平時的項目測試中&#xff0c;尤其是前后端分離的時候&#xff0c;前端人員需要測試調用后端的接口&#xff0c;這個時候會出現測試不方便的情況。此時我們可以使用fastmock平臺在線上模擬出一個可以調用的接口&#xff0c;方便前端人員進行數據測…

C/C++---------------LeetCode第2540. 最小公共值

最小公共值 題目及要求哈希算法雙指針 題目及要求 給你兩個整數數組 nums1 和 nums2 &#xff0c;它們已經按非降序排序&#xff0c;請你返回兩個數組的 最小公共整數 。如果兩個數組 nums1 和 nums2 沒有公共整數&#xff0c;請你返回 -1 。 如果一個整數在兩個數組中都 至少…

categraf托管與自升級

categraf支持多種方式進行部署、托管&#xff0c;社區里部署和管理categraf也是五花八門&#xff0c;大家自己使用方便即可。 之前我們覺得大家通過ansible之類的工具批量下發/更新就能很簡單地完成任務&#xff0c;最近很多用戶咨詢我們關于categraf有沒有更方便的升級方式&am…

flink和機器學習模型的常用組合方式

背景 flink是一個低延遲高吞吐的系統&#xff0c;每秒處理的數據量高達數百萬&#xff0c;而機器模型一般比較笨重&#xff0c;雖然功能強大&#xff0c;但是qps一般都比較低&#xff0c;日常工作中&#xff0c;我們一般是如何把flink和機器學習模型組合起來一起使用呢? fli…