refactor(utils): 提取缓存逻辑到通用工具函数
- 在 utils 中新增 executeWithCache 函数用于统一缓存处理 - 将 Dictionary Cascader 组件中的全局缓存逻辑替换为新工具函数 - 将 Department LeftTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary LeftTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary Select 组件中的全局缓存逻辑替换为新工具函数 - 将 Personnel Select 组件中的全局缓存逻辑替换为新工具函数 - 将 Department SelectTree 组件中的全局缓存逻辑替换为新工具函数 - 将 Dictionary SelectTree 组件中的全局缓存逻辑替换为新工具函数 - 移除各组件中的重复缓存实现代码 - 为新工具函数添加类型定义支持master
LiuJiaNan
parent
5073124113
commit
bd08aa9da9
|
|
@ -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 });
|
||||
|
||||
// 检查缓存，如果存在直接返回缓存结果
|
||||
if (cacheMap.has(cacheKey)) {
|
||||
setTreeData(cacheMap.get(cacheKey));
|
||||
return;
|
||||
}
|
||||
const cacheKey = { appKey, dictValue };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setTreeData(data);
|
||||
return data;
|
||||
}, setTreeData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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 cacheKey = { searchType, params };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request(requestUrl, "post", actualParams);
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setTreeData(data);
|
||||
return data;
|
||||
}, setTreeData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
||||
// 检查缓存，如果存在直接返回缓存结果
|
||||
if (cacheMap.has(cacheKey)) {
|
||||
setTreeData(cacheMap.get(cacheKey));
|
||||
return;
|
||||
}
|
||||
const cacheKey = { appKey, dictValue };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setTreeData(data);
|
||||
return data;
|
||||
}, setTreeData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
||||
// 检查缓存，如果存在直接返回缓存结果
|
||||
if (cacheMap.has(cacheKey)) {
|
||||
setData(cacheMap.get(cacheKey));
|
||||
return;
|
||||
}
|
||||
const cacheKey = { appKey, dictValue };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setData(data);
|
||||
return data;
|
||||
}, setData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request("/basicInfo/user/listAll", "get", { ...params, ...actualExtraParams, time: new Date().getTime() });
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setData(data);
|
||||
return data;
|
||||
}, setData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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 cacheKey = { searchType, params };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request(requestUrl, "post", actualParams);
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setTreeData(data);
|
||||
return data;
|
||||
}, setTreeData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
||||
// 检查缓存，如果存在直接返回缓存结果
|
||||
if (cacheMap.has(cacheKey)) {
|
||||
setTreeData(cacheMap.get(cacheKey));
|
||||
return;
|
||||
}
|
||||
const cacheKey = { appKey, dictValue };
|
||||
|
||||
await executeWithCache(cacheKey, async () => {
|
||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||
|
||||
// 存入缓存
|
||||
cacheMap.set(cacheKey, data);
|
||||
|
||||
setTreeData(data);
|
||||
return data;
|
||||
}, setTreeData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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<void>;
|
|||
* 是否空html，用于给富文本编辑器使用
|
||||
*/
|
||||
export function normalizeEmptyHtml(html: string): string;
|
||||
|
||||
/**
|
||||
* 带缓存的请求执行函数
|
||||
*/
|
||||
export function executeWithCache<T>(
|
||||
cacheKey: string | object,
|
||||
requestFn: () => Promise<T>,
|
||||
setData: Dispatch<SetStateAction<T[]>>,
|
||||
): Promise<T>;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue