From bd08aa9da99868936a78f4c058c1d3b0b7765949 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Thu, 7 May 2026 15:00:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor(utils):=20=E6=8F=90=E5=8F=96=E7=BC=93?= =?UTF-8?q?=E5=AD=98=E9=80=BB=E8=BE=91=E5=88=B0=E9=80=9A=E7=94=A8=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 utils 中新增 executeWithCache 函数用于统一缓存处理 - 将 Dictionary Cascader 组件中的全局缓存逻辑替换为新工具函数 - 将 Department LeftTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary LeftTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary Select 组件中的全局缓存逻辑替换为新工具函数 - 将 Personnel Select 组件中的全局缓存逻辑替换为新工具函数 - 将 Department SelectTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary SelectTree 组件中的全局缓存逻辑替换为新工具函数 - 移除各组件中的重复缓存实现代码 - 为新工具函数添加类型定义支持 --- src/components/Cascader/Dictionary/index.js | 25 ++++---------- .../LeftTree/Department/Gwj/index.js | 26 ++++----------- src/components/LeftTree/Dictionary/index.js | 25 ++++---------- src/components/Select/Dictionary/index.js | 25 ++++---------- src/components/Select/Personnel/Gwj/index.js | 26 ++++----------- .../SelectTree/Department/Gwj/index.js | 26 ++++----------- src/components/SelectTree/Dictionary/index.js | 25 ++++---------- src/utils/index.d.ts | 10 ++++++ src/utils/index.js | 33 +++++++++++++++++++ 9 files changed, 85 insertions(+), 136 deletions(-) diff --git a/src/components/Cascader/Dictionary/index.js b/src/components/Cascader/Dictionary/index.js index ecd1eac..9d8087a 100644 --- a/src/components/Cascader/Dictionary/index.js +++ b/src/components/Cascader/Dictionary/index.js @@ -1,11 +1,9 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary"; +import { executeWithCache } from "../../../utils"; import BasicCascader from "../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 数据字典级联组件 */ @@ -21,8 +19,6 @@ function DictionaryCascader(props) { const [treeData, setTreeData] = useState([]); const getData = async () => { - setTreeData([]); - if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) { console.error(`【DictionaryCascader】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`); return; @@ -33,21 +29,12 @@ function DictionaryCascader(props) { return; } - // 生成缓存键 - const cacheKey = JSON.stringify({ appKey, dictValue }); + const cacheKey = { appKey, dictValue }; - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setTreeData(cacheMap.get(cacheKey)); - return; - } - - const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); - - // 存入缓存 - cacheMap.set(cacheKey, data); - - setTreeData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); + return data; + }, setTreeData); }; useEffect(() => { diff --git a/src/components/LeftTree/Department/Gwj/index.js b/src/components/LeftTree/Department/Gwj/index.js index 79068b3..09ff964 100644 --- a/src/components/LeftTree/Department/Gwj/index.js +++ b/src/components/LeftTree/Department/Gwj/index.js @@ -1,10 +1,8 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; +import { executeWithCache } from "../../../../utils"; import BasicLeftTree from "../../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 部门左侧树组件（港务局版本） */ @@ -18,18 +16,6 @@ function DepartmentLeftTree(props) { const [treeData, setTreeData] = useState([]); const getData = async () => { - setTreeData([]); - - // 生成缓存键 - const paramsStr = JSON.stringify(params); - const cacheKey = `${searchType}_${paramsStr}`; - - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setTreeData(cacheMap.get(cacheKey)); - return; - } - let requestUrl = ""; const actualParams = { ...params, time: new Date().getTime() }; if (searchType === "current") { @@ -53,12 +39,12 @@ function DepartmentLeftTree(props) { } } - const { data } = await request(requestUrl, "post", actualParams); + const cacheKey = { searchType, params }; - // 存入缓存 - cacheMap.set(cacheKey, data); - - setTreeData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request(requestUrl, "post", actualParams); + return data; + }, setTreeData); }; useEffect(() => { diff --git a/src/components/LeftTree/Dictionary/index.js b/src/components/LeftTree/Dictionary/index.js index baf2eb3..947e50a 100644 --- a/src/components/LeftTree/Dictionary/index.js +++ b/src/components/LeftTree/Dictionary/index.js @@ -1,11 +1,9 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary"; +import { executeWithCache } from "../../../utils"; import BasicLeftTree from "../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 数据字典左侧树组件 */ @@ -21,8 +19,6 @@ function DictionaryLeftTree(props) { const [treeData, setTreeData] = useState([]); const getData = async () => { - setTreeData([]); - if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) { console.error(`【DictionaryLeftTree】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`); return; @@ -33,21 +29,12 @@ function DictionaryLeftTree(props) { return; } - // 生成缓存键 - const cacheKey = JSON.stringify({ appKey, dictValue }); + const cacheKey = { appKey, dictValue }; - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setTreeData(cacheMap.get(cacheKey)); - return; - } - - const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); - - // 存入缓存 - cacheMap.set(cacheKey, data); - - setTreeData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); + return data; + }, setTreeData); }; useEffect(() => { diff --git a/src/components/Select/Dictionary/index.js b/src/components/Select/Dictionary/index.js index 70fcb21..2d1eb25 100644 --- a/src/components/Select/Dictionary/index.js +++ b/src/components/Select/Dictionary/index.js @@ -1,11 +1,9 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary"; +import { executeWithCache } from "../../../utils"; import BasicSelect from "../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 数据字典下拉组件 */ @@ -21,8 +19,6 @@ function DictionarySelect(props) { const [data, setData] = useState([]); const getData = async () => { - setData([]); - if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) { console.error(`【DictionarySelect】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`); return; @@ -33,21 +29,12 @@ function DictionarySelect(props) { return; } - // 生成缓存键 - const cacheKey = JSON.stringify({ appKey, dictValue }); + const cacheKey = { appKey, dictValue }; - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setData(cacheMap.get(cacheKey)); - return; - } - - const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); - - // 存入缓存 - cacheMap.set(cacheKey, data); - - setData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); + return data; + }, setData); }; useEffect(() => { diff --git a/src/components/Select/Personnel/Gwj/index.js b/src/components/Select/Personnel/Gwj/index.js index 93bcde7..7903915 100644 --- a/src/components/Select/Personnel/Gwj/index.js +++ b/src/components/Select/Personnel/Gwj/index.js @@ -1,10 +1,8 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; +import { executeWithCache } from "../../../../utils"; import BasicSelect from "../../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 人员下拉组件（港务局版本） */ @@ -27,8 +25,6 @@ function PersonnelSelect(props) { const [data, setData] = useState([]); const getData = async () => { - setData([]); - if (!isNeedCorpInfoId && !isNeedDepartmentId && !isNeedPostId) { console.error("【PersonnelSelect】 请至少传入一个参数"); return; @@ -43,22 +39,12 @@ function PersonnelSelect(props) { return; const actualExtraParams = { ...defaultExtraParams, ...extraParams }; + const cacheKey = { params, extraParams: actualExtraParams }; - // 生成缓存键 - const cacheKey = JSON.stringify({ params, extraParams: actualExtraParams }); - - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setData(cacheMap.get(cacheKey)); - return; - } - - const { data } = await request("/basicInfo/user/listAll", "get", { ...params, ...actualExtraParams, time: new Date().getTime() }); - - // 存入缓存 - cacheMap.set(cacheKey, data); - - setData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request("/basicInfo/user/listAll", "get", { ...params, ...actualExtraParams, time: new Date().getTime() }); + return data; + }, setData); }; useEffect(() => { diff --git a/src/components/SelectTree/Department/Gwj/index.js b/src/components/SelectTree/Department/Gwj/index.js index ffa9f57..394996e 100644 --- a/src/components/SelectTree/Department/Gwj/index.js +++ b/src/components/SelectTree/Department/Gwj/index.js @@ -1,10 +1,8 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; +import { executeWithCache } from "../../../../utils"; import BasicSelectTree from "../../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 部门下拉树组件（港务局版本） */ @@ -21,18 +19,6 @@ function DepartmentSelectTree(props) { const [treeData, setTreeData] = useState([]); const getData = async () => { - setTreeData([]); - - // 生成缓存键 - const paramsStr = JSON.stringify(params); - const cacheKey = `${searchType}_${paramsStr}`; - - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setTreeData(cacheMap.get(cacheKey)); - return; - } - if (searchType === "current") { if (isNeedCorpInfoId && !params.eqCorpinfoId) return; @@ -63,12 +49,12 @@ function DepartmentSelectTree(props) { } } - const { data } = await request(requestUrl, "post", actualParams); + const cacheKey = { searchType, params }; - // 存入缓存 - cacheMap.set(cacheKey, data); - - setTreeData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request(requestUrl, "post", actualParams); + return data; + }, setTreeData); }; useEffect(() => { diff --git a/src/components/SelectTree/Dictionary/index.js b/src/components/SelectTree/Dictionary/index.js index 3f43edc..cf019dc 100644 --- a/src/components/SelectTree/Dictionary/index.js +++ b/src/components/SelectTree/Dictionary/index.js @@ -1,11 +1,9 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js"; import { useEffect, useState } from "react"; import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary"; +import { executeWithCache } from "../../../utils"; import BasicSelectTree from "../Basic"; -// 全局缓存 -const cacheMap = new Map(); - /** * 数据字典下拉树组件 */ @@ -21,8 +19,6 @@ function DictionarySelectTree(props) { const [treeData, setTreeData] = useState([]); const getData = async () => { - setTreeData([]); - if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) { console.error(`【DictionarySelectTree】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`); return; @@ -33,21 +29,12 @@ function DictionarySelectTree(props) { return; } - // 生成缓存键 - const cacheKey = JSON.stringify({ appKey, dictValue }); + const cacheKey = { appKey, dictValue }; - // 检查缓存，如果存在直接返回缓存结果 - if (cacheMap.has(cacheKey)) { - setTreeData(cacheMap.get(cacheKey)); - return; - } - - const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); - - // 存入缓存 - cacheMap.set(cacheKey, data); - - setTreeData(data); + await executeWithCache(cacheKey, async () => { + const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue }); + return data; + }, setTreeData); }; useEffect(() => { diff --git a/src/utils/index.d.ts b/src/utils/index.d.ts index df86bd1..42a0d2f 100644 --- a/src/utils/index.d.ts +++ b/src/utils/index.d.ts @@ -1,3 +1,4 @@ +import type { Dispatch, SetStateAction } from "react"; import type { BasePaginationConfig } from "../hooks/useTable"; // 定义 getDataType 函数可能返回的所有类型 @@ -377,3 +378,12 @@ export function dynamicLoadCss(url: string): Promise; * 是否空html，用于给富文本编辑器使用 */ export function normalizeEmptyHtml(html: string): string; + +/** + * 带缓存的请求执行函数 + */ +export function executeWithCache( + cacheKey: string | object, + requestFn: () => Promise, + setData: Dispatch>, +): Promise; diff --git a/src/utils/index.js b/src/utils/index.js index e23968d..aecfa9f 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -615,3 +615,36 @@ export async function getFileUrlFromServer() { const { data } = await request("/basicInfo/imgFiles/getImagePath", "get"); window.fileUrl = data; } + +// 全局请求缓存 +const requestCacheMap = new Map(); + +/** + * 带缓存的请求执行函数 + * @param {string | object} cacheKey - 缓存键 + * @param {Function} requestFn - 请求函数，返回 Promise + * @param {Function} setData - 设置数据的回调 + * @returns {Promise} 请求结果 + */ +export async function executeWithCache(cacheKey, requestFn, setData) { + // 清空旧数据 + setData([]); + + // 生成缓存键 + const key = typeof cacheKey === "string" ? cacheKey : JSON.stringify(cacheKey); + + // 检查缓存，如果存在直接返回缓存结果 + if (requestCacheMap.has(key)) { + setData(requestCacheMap.get(key)); + return requestCacheMap.get(key); + } + + // 执行请求 + const result = await requestFn(); + + // 存入缓存 + requestCacheMap.set(key, result); + + setData(result); + return result; +}