@hzab/data-model 2.0.2 → 2.0.3-alpha.0

package/README.md

@@ -127,6 +127,23 @@ function Demo({ orgId }) {
 }
 ```
 
+
+#### 重复请求拦截
+```tsx
+import RequestCache from "@hzab/data-model/RequestCache";
+import { AxiosRequestConfigWithCache, setAxRequest } from "@hzab/data-model";
+
+const requestCache = new RequestCache({ options: { cacheTTL: 2000 } });
+
+setAxRequest((config: AxiosRequestConfigWithCache) => {
+  // 拦截 get 请求
+  if (config.method.toLowerCase() === "get") {
+    return requestCache.handleAxRequest(config);
+  }
+  return config;
+});
+```
+
 ## DataModel
 
 | 参数                    | 类型     | 必填 | 默认值 | 说明                                           |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/data-model",
-  "version": "2.0.2",
+  "version": "2.0.3-alpha.0",
   "description": "data model",
   "main": "src",
   "scripts": {

package/src/RequestCache.ts

@@ -0,0 +1,202 @@
+import { InternalAxiosRequestConfig } from "axios";
+import { axiosDef } from "./axios";
+
+/**
+ * 缓存配置
+ */
+export interface CacheOpt {
+  /** 缓存时间 毫秒 */
+  cacheTTL?: number;
+}
+
+/**
+ * 缓存方法入参配置
+ */
+export interface RequestCacheParams {
+  options?: CacheOpt;
+}
+
+/**
+ * 接口入参（用于生成缓存 key）
+ */
+export interface Req {
+  method?: string;
+  baseURL?: string;
+  url?: string;
+  params?: unknown;
+  data?: unknown;
+}
+
+/**
+ * 缓存对象
+ */
+export interface CacheItem {
+  key: string;
+  /** 过期时间戳 */
+  expires?: number;
+  /** 缓存的 promise */
+  promise?: Promise<unknown>;
+  /** 缓存的 axios config 配置 */
+  config?: InternalAxiosRequestConfig;
+  resolve: (d) => void;
+  reject: (err) => void;
+}
+
+/**
+ * 接口缓存类
+ */
+export class RequestCache {
+  options: CacheOpt;
+  cacheTTL = 3000;
+  /** 存储为 CacheItem（类型为 unknown，返回时断言） */
+  _cacheMap: Map<string, CacheItem> = new Map();
+
+  constructor(params: RequestCacheParams) {
+    const { options = {} } = params || {};
+    this.cacheTTL = options?.cacheTTL ?? 3000;
+    this.options = options;
+  }
+
+  /**
+   * 处理 axios request 拦截逻辑
+   * @param config
+   * @returns
+   */
+  handleAxRequest(config) {
+    if (this.hasCache(config)) {
+      const cache = this.getCache(config);
+      // 存在缓存，
+      return Promise.reject({
+        code: 200,
+        key: this.getCacheKey(config),
+        config,
+        from: "cache",
+        cache,
+      });
+    }
+    this.rmCache(config);
+
+    const cacheData = {
+      code: 200,
+      key: this.getCacheKey(config),
+      config,
+      from: "cache",
+      promise: undefined,
+      resolve: undefined,
+      reject: undefined,
+    };
+    // 设置 promise 保持请求挂起状态
+    cacheData.promise = new Promise((resolve, reject) => {
+      cacheData.resolve = resolve;
+      cacheData.reject = reject;
+    });
+
+    config.cache = this.addCache(cacheData);
+    return config;
+  }
+
+  /**
+   * 判断是否存在缓存
+   * @param axConf
+   * @returns
+   */
+  hasCache(axConf) {
+    const key = this.getCacheKey(axConf);
+    const cache = this._cacheMap.get(key);
+    if (cache && cache.expires >= Date.now()) {
+      return true;
+    }
+    // 过期清除
+    this._cacheMap.delete(key);
+    return false;
+  }
+
+  /**
+   * 获取缓存
+   * @param axios config
+   * @param opt 自定义缓存配置
+   * @returns Promise<T>
+   */
+  getCache(axConf, opt?: CacheOpt): CacheItem {
+    const key = this.getCacheKey(axConf);
+
+    return this.getCacheByKey(key, opt);
+  }
+
+  /**
+   * 获取缓存
+   * @param key string
+   * @param opt 自定义缓存配置
+   * @returns Promise<T>
+   */
+  getCacheByKey(key, opt?: CacheOpt) {
+    // TODO: 过期处理？ 结果和请求分开。只有请求才进行过期判断？
+    // 存在未过期的缓存
+    const cached = this._cacheMap.get(key);
+    if (cached && cached.expires > Date.now()) {
+      return cached;
+    }
+
+    // 过期删除
+    if (cached) {
+      this._cacheMap.delete(key);
+    }
+  }
+
+  /**
+   * 添加缓存
+   * @param promise 要缓存的 Promise
+   * @param req 请求描述对象
+   * @param config 缓存配置
+   */
+  addCache(data: CacheItem, opt: CacheOpt = this.options): CacheItem {
+    const { config } = data || {};
+    const key = this.getCacheKey(config);
+    if (this._cacheMap.has(key)) {
+      return this._cacheMap.get(key);
+    }
+    const ttl = opt?.cacheTTL ?? this.cacheTTL;
+    const cache = {
+      ...data,
+      key,
+      expires: Date.now() + ttl,
+      config: config,
+      promise: data.promise,
+    };
+    this._cacheMap.set(key, cache);
+    return cache;
+  }
+
+  rmCache(config: Req) {
+    this._cacheMap.delete(this.getCacheKey(config));
+  }
+
+  /**
+   * 获取缓存的 key
+   * @param config 请求入参
+   * @returns 缓存键字符串
+   */
+  getCacheKey(config: Req): string {
+    const { baseURL, method, url, params, data } = config;
+    // 注意：params 和 data 需要序列化，并保证对象属性顺序稳定性
+    return `${method}:${baseURL}/${url}:${this.stableStringify(params)}:${this.stableStringify(data)}`;
+  }
+
+  /**
+   * 序列化对象，保证属性顺序一致
+   * @param obj 任意值
+   * @returns JSON 字符串
+   */
+  private stableStringify(obj: unknown): string {
+    if (!obj || typeof obj !== "object") return JSON.stringify(obj);
+    const sorted = Object.keys(obj)
+      .sort()
+      .reduce((acc, key) => {
+        acc[key] = (obj as Record<string, unknown>)[key];
+        return acc;
+      }, {} as Record<string, unknown>);
+    return JSON.stringify(sorted);
+  }
+}
+
+export default RequestCache;

package/src/axios.ts

@@ -1,210 +1,245 @@
-import axiosDef, { AxiosResponse, InternalAxiosRequestConfig } from "axios";
-import Cookies from "js-cookie";
-import _ from "lodash";
-
-export const TOKEN = "token";
-
-const axios = axiosDef.create();
-
-/**
- * setToken 选项接口
- */
-export interface SetTokenOptions {
-  /** 是否同时设置 cookie */
-  hasCookie?: boolean;
-  /** cookie 属性配置 */
-  cookieAttrs?: Cookies.CookieAttributes;
-}
-
-/**
- * getToken 选项接口
- */
-export interface GetTokenOptions {
-  /** 是否从 cookie 获取 */
-  hasCookie?: boolean;
-}
-
-/**
- * 处理错误回调函数的选项接口
- */
-export interface HandleErrCbOptions {
-  /** 直接替换回调函数 */
-  replaceErrCb?: boolean;
-  /** 日志前缀 */
-  logPrefix?: string;
-}
-
-/**
- * 设置 token
- * @param token token 值
- * @param opt 选项
- */
-export function setToken(token = "", opt?: SetTokenOptions) {
-  const { hasCookie = false } = opt || {};
-  const _t = token || "";
-  if (hasCookie) {
-    const { cookieAttrs } = opt || {};
-    const cookieOpt = _.merge(
-      {
-        expires: 365,
-      },
-      cookieAttrs,
-    );
-    Cookies.set(TOKEN, _t, cookieOpt);
-  }
-  localStorage.setItem(TOKEN, _t);
-  setAxAuthorization(_t);
-}
-
-/**
- * 获取 token
- * @param opt 选项
- * @returns token 值
- */
-export function getToken(opt?: GetTokenOptions): string {
-  const { hasCookie = false } = opt || {};
-  let token = "";
-  if (hasCookie) {
-    token = Cookies.get(TOKEN) || "";
-    if (token) {
-      return token;
-    }
-  }
-  token = localStorage.getItem(TOKEN);
-  return token;
-}
-
-export const temp = { axiosList: [axios, axiosDef] };
-
-/**
- * 设置 axios 列表，用于批量设置 axios 相关配置
- * @param axiosList axios 实例列表
- * @returns 更新后的 axios 实例列表
- */
-export function setAxios(axiosList: (typeof axios | typeof axiosDef)[]) {
-  temp.axiosList = [...temp.axiosList, ...axiosList];
-  return temp.axiosList;
-}
-
-/**
- * axios 请求拦截器
- * @param cb 成功回调
- * @param errCb 错误回调
- * @param opt 选项
- */
-export function setAxRequest(
-  cb: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>,
-  errCb?: (error: any) => Promise<any>,
-  opt?: HandleErrCbOptions,
-) {
-  temp.axiosList?.forEach((_ax) => {
-    _ax.interceptors.request.use(cb, handleErrCb(errCb, { logPrefix: "Error axios response: ", ...opt }));
-  });
-}
-
-/**
- * 响应拦截器
- * @param cb 成功回调
- * @param errCb 错误回调
- * @param opt 选项
- */
-export function setAxResponse(
-  cb: (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>,
-  errCb?: (error: any) => Promise<any>,
-  opt?: HandleErrCbOptions,
-) {
-  temp.axiosList?.forEach((_ax) => {
-    _ax.interceptors.response.use(cb, handleErrCb(errCb, { logPrefix: "Error axios response: ", ...opt }));
-  });
-}
-
-/**
- * 处理错误回调函数
- * @param errCb 错误回调
- * @param opt 选项
- * @returns 处理后的错误回调
- */
-export function handleErrCb(errCb?: (error: any) => Promise<any>, opt?: HandleErrCbOptions) {
-  const { replaceErrCb, logPrefix } = opt || {};
-  const isFn = typeof errCb === "function";
-
-  if (replaceErrCb && isFn) {
-    return errCb;
-  }
-
-  return (error: any) => {
-    if (axiosDef.isCancel(error)) {
-      console.info("axios 请求已取消:", error);
-      return Promise.reject(error);
-    }
-    console.error(logPrefix, error);
-    return isFn ? errCb(error) : Promise.reject(error);
-  };
-}
-
-/**
- * 设置 axios.defaults
- * @param key 配置键
- * @param val 配置值
- */
-export function setAxDefaults(key: string, val: any) {
-  temp.axiosList?.forEach((_ax) => {
-    (_ax.defaults as any)[key] = val;
-  });
-}
-
-/**
- * 设置 headers
- * @param key header 键
- * @param val header 值
- */
-export function setAxHeaders(key: string, val: any) {
-  temp.axiosList?.forEach((_ax) => {
-    (_ax.defaults.headers as any)[key] = val;
-  });
-}
-
-/**
- * 设置 timeout
- * @param timeout 超时时间
- */
-export function setAxTimeout(timeout = 0) {
-  setAxDefaults("timeout", timeout);
-}
-
-/**
- * 设置 Authorization token
- * @param token token 值
- */
-export function setAxAuthorization(token: string) {
-  setAxHeaders("Authorization", token);
-}
-
-/**
- * 设置 baseUrl
- * @param url 基础 URL
- */
-export function setAxBaseUrl(url: string) {
-  setAxDefaults("baseURL", url);
-}
-
-/**
- * 获取 axios.CancelToken.source，用于取消请求
- * @returns CancelToken source
- */
-export function getCancelTokenSource() {
-  return axiosDef.CancelToken.source();
-}
-
-/**
- * 检查是否是 cancel 的结果
- * @param res
- * @returns
- */
-export function isCancel(res) {
-  return axiosDef.isCancel(res);
-}
-
-export { axios, axiosDef };
-
-export default axios;
+import axiosDef, { AxiosResponse, InternalAxiosRequestConfig } from "axios";
+import Cookies from "js-cookie";
+import _ from "lodash";
+
+import { CacheItem } from "./RequestCache";
+
+export const TOKEN = "token";
+
+const axios = axiosDef.create();
+
+export interface AxiosRequestConfigWithCache extends InternalAxiosRequestConfig {
+  cache?: CacheItem;
+}
+
+// 使用交叉类型扩展 AxiosResponse
+export type AxiosResponseCus = AxiosResponse & {
+  config: AxiosRequestConfigWithCache;
+};
+
+/**
+ * setToken 选项接口
+ */
+export interface SetTokenOptions {
+  /** 是否同时设置 cookie */
+  hasCookie?: boolean;
+  /** cookie 属性配置 */
+  cookieAttrs?: Cookies.CookieAttributes;
+}
+
+/**
+ * getToken 选项接口
+ */
+export interface GetTokenOptions {
+  /** 是否从 cookie 获取 */
+  hasCookie?: boolean;
+}
+
+/**
+ * 处理错误回调函数的选项接口
+ */
+export interface HandleErrCbOptions {
+  /** 直接替换回调函数 */
+  replaceErrCb?: boolean;
+  /** 日志前缀 */
+  logPrefix?: string;
+}
+
+/**
+ * 设置 token
+ * @param token token 值
+ * @param opt 选项
+ */
+export function setToken(token = "", opt?: SetTokenOptions) {
+  const { hasCookie = false } = opt || {};
+  const _t = token || "";
+  if (hasCookie) {
+    const { cookieAttrs } = opt || {};
+    const cookieOpt = _.merge(
+      {
+        expires: 365,
+      },
+      cookieAttrs,
+    );
+    Cookies.set(TOKEN, _t, cookieOpt);
+  }
+  localStorage.setItem(TOKEN, _t);
+  setAxAuthorization(_t);
+}
+
+/**
+ * 获取 token
+ * @param opt 选项
+ * @returns token 值
+ */
+export function getToken(opt?: GetTokenOptions): string {
+  const { hasCookie = false } = opt || {};
+  let token = "";
+  if (hasCookie) {
+    token = Cookies.get(TOKEN) || "";
+    if (token) {
+      return token;
+    }
+  }
+  token = localStorage.getItem(TOKEN);
+  return token;
+}
+
+export const temp = { axiosList: [axios, axiosDef] };
+
+/**
+ * 设置 axios 列表，用于批量设置 axios 相关配置
+ * @param axiosList axios 实例列表
+ * @returns 更新后的 axios 实例列表
+ */
+export function setAxios(axiosList: (typeof axios | typeof axiosDef)[]) {
+  temp.axiosList = [...temp.axiosList, ...axiosList];
+  return temp.axiosList;
+}
+
+/**
+ * axios 请求拦截器
+ * @param cb 成功回调
+ * @param errCb 错误回调
+ * @param opt 选项
+ */
+export function setAxRequest(
+  cb: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>,
+  errCb?: (error: any) => Promise<any>,
+  opt?: HandleErrCbOptions,
+) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.interceptors.request.use(cb, handleErrCb(errCb, { logPrefix: "Error axios response: ", ...opt }));
+  });
+}
+
+/**
+ * 响应拦截器
+ * @param cb 成功回调
+ * @param errCb 错误回调
+ * @param opt 选项
+ */
+export function setAxResponse(
+  cb: (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>,
+  errCb?: (error) => Promise<any>,
+  opt?: HandleErrCbOptions,
+) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.interceptors.response.use(cb, handleErrCb(errCb, { logPrefix: "Error axios response: ", ...opt }));
+  });
+}
+
+/**
+ * 处理错误回调函数
+ * @param errCb 错误回调
+ * @param opt 选项
+ * @returns 处理后的错误回调
+ */
+export function handleErrCb(errCb?: (error: any) => Promise<any>, opt?: HandleErrCbOptions) {
+  const { replaceErrCb, logPrefix } = opt || {};
+  const isFn = typeof errCb === "function";
+  if (replaceErrCb && isFn) {
+    return errCb;
+  }
+  return (error: any) => {
+    console.error(logPrefix, error);
+    return isFn ? errCb(error) : Promise.reject(error);
+  };
+}
+
+/**
+ * 设置 axios.defaults
+ * @param key 配置键
+ * @param val 配置值
+ */
+export function setAxDefaults(key: string, val: any) {
+  temp.axiosList?.forEach((_ax) => {
+    (_ax.defaults as any)[key] = val;
+  });
+}
+
+/**
+ * 设置 headers
+ * @param key header 键
+ * @param val header 值
+ */
+export function setAxHeaders(key: string, val: any) {
+  temp.axiosList?.forEach((_ax) => {
+    (_ax.defaults.headers as any)[key] = val;
+  });
+}
+
+/**
+ * 设置 timeout
+ * @param timeout 超时时间
+ */
+export function setAxTimeout(timeout = 0) {
+  setAxDefaults("timeout", timeout);
+}
+
+/**
+ * 设置 Authorization token
+ * @param token token 值
+ */
+export function setAxAuthorization(token: string) {
+  setAxHeaders("Authorization", token);
+}
+
+/**
+ * 设置 baseUrl
+ * @param url 基础 URL
+ */
+export function setAxBaseUrl(url: string) {
+  setAxDefaults("baseURL", url);
+}
+
+/**
+ * 获取 axios.CancelToken.source，用于取消请求
+ * @returns CancelToken source
+ */
+export function getCancelTokenSource() {
+  return axiosDef.CancelToken.source();
+}
+
+/**
+ * 检查是否是 cancel 的结果
+ * @param res
+ * @returns
+ */
+export function isCancel(res) {
+  return axiosDef.isCancel(res);
+}
+
+// 接口缓存处理
+temp.axiosList?.forEach((_ax) => {
+  _ax.interceptors.response.use(
+    async (response: AxiosResponseCus) => {
+      // 存在缓存时，取缓存数据
+      if (response.config?.cache) {
+        // 有结果时结束 promise
+        response.config?.cache.resolve(response);
+        const res = await (response.config?.cache.promise as Promise<AxiosResponse>);
+        return res;
+      }
+      return response;
+    },
+    async (error) => {
+      // 取缓存数据
+      if (error?.cache && error?.cache.promise) {
+        // 有结果时结束 promise
+        const res = await (error?.cache.promise as Promise<AxiosResponse>);
+        return res;
+      }
+
+      // 接口取消
+      if (axiosDef.isCancel(error)) {
+        console.info("axios 请求已取消:", error);
+        return Promise.reject(error);
+      }
+    },
+  );
+});
+
+export { axios, axiosDef };
+
+export default axios;