前端实现请求幂等性拦截的核心是：生成查询条件的稳定哈希指纹，通过web crypto api计算sha-256摘要，并在内存缓存中校验时效性，避免重复提交。

前端实现请求幂等性拦截，核心思路是：对查询条件生成唯一、稳定的哈希标识，作为请求的“指纹”，在发起前检查该指纹是否已在近期发出过（且未完成），从而避免重复提交。JSON.stringify 本身不能直接生成哈希，它只是将对象转为字符串；真正生成哈希需借助浏览器原生 API（如 SubtleCrypto）或轻量库。关键在于“稳定序列化” + “确定性哈希”。

确保查询条件序列化稳定

JSON.stringify({b:1,a:2}) 和 JSON.stringify({a:2,b:1}) 结果不同，但语义相同。直接使用会导致哈希不一致。必须先对键排序再序列化：

• 用 JSON.stringify(obj, Object.keys(obj).sort()) 强制按字母序排列 key
• 对嵌套对象、数组也要递归标准化：比如数组不排序（除非业务允许）、日期转 ISO 字符串、undefined 转 null、去除空字段（可选）
• 推荐封装一个 stableStringify 工具函数，统一处理 NaN、-0、循环引用（抛错或跳过）等边界

用 SubtleCrypto 生成安全哈希（无需第三方库）

现代浏览器支持 Web Crypto API，可同步生成 SHA-256 哈希摘要：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 先调用 new TextEncoder().encode(stableStr) 得到 Uint8Array
• 再用 crypto.subtle.digest('SHA-256', bytes) 返回 Promise
• 转为十六进制字符串：Array.from(new Uint8Array(hash), b => b.toString(16).padStart(2,'0')).join('')
• 注意：digest 是异步的，需 await；若需同步（如表单提交拦截），可用 async/await 包裹或提前预计算

内存中维护近期请求指纹缓存

哈希值本身无意义，需配合时效性缓存做拦截：

• 用 Map 或 WeakMap 存储 hash → { timestamp, controller? }，设置 TTL（如 5 秒）
• 发起请求前，先计算当前条件哈希，查缓存：若存在且未超时，直接返回上次 Promise（或 throw 重复提交错误）
• 若不存在，存入新哈希 + AbortController（便于取消重复请求），再发请求；响应后或失败后清理该 hash
• 注意清理时机：fetch.then/.catch、或用 AbortSignal 的 abort 事件监听

实际拦截逻辑示例（精简版）

以下是一个可直接集成的请求拦截片段：

const pending = new Map(); // hash → { promise, controller, timestamp }
const TTL = 5000;
<p>async function getQueryHash(params) {
const str = stableStringify(params);
const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2,'0')).join('');
}</p><p>export async function safeFetch(url, params) {
const hash = await getQueryHash(params);
const now = Date.now();</p><p>if (pending.has(hash)) {
const { promise } = pending.get(hash);
if (now - pending.get(hash).timestamp </p><p>const controller = new AbortController();
const promise = fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(params),
signal: controller.signal
}).finally(() => pending.delete(hash));</p><p>pending.set(hash, { promise, controller, timestamp: now });
return promise;
}</p>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南