const SaveButton = () => {  
 const [loading, setLoading] = useState(false);  
  
 const handleSave = async () => {  
 if (loading) return; // 防止重復(fù)觸發(fā)  
 setLoading(true);  
 try {  
 await api.submitForm(data);  
 message.success("保存成功");  
 } catch (error) {  
 message.error("保存失敗");  
 } finally {  
 setLoading(false); // 請求完成后恢復(fù)按鈕狀態(tài)  
 }  
 };  
  
 return <Button loading={loading} onClick={handleSave}>保存</Button>;  
};  

import axios from 'axios';  
import { sha256 } from 'js-sha256';  
  
// 緩存容器：key=請求唯一標(biāo)識，value=請求Promise  
const requestCache = new Map();  
  
// 創(chuàng)建Axios實例  
const service = axios.create({  
 baseURL: import.meta.env.VITE_API_BASE_URL,  
 timeout: 5000  
});  
  
// 請求攔截器  
service.interceptors.request.use(  
 (config) => {  
 // 1. 生成請求唯一標(biāo)識（URL+方法+參數(shù)）  
 const requestKey = generateRequestKey(config);  
   
 // 2. 檢查緩存：若存在未完成的請求，直接返回緩存的Promise  
 if (requestCache.has(requestKey)) {  
 return requestCache.get(requestKey);  
 }  
   
 // 3. 若不存在緩存，發(fā)送請求并緩存Promise  
 const requestPromise = Promise.resolve(config);  
 requestCache.set(requestKey, requestPromise);  
 return requestPromise;  
 },  
 (error) => Promise.reject(error)  
);  
  
// 響應(yīng)攔截器  
service.interceptors.response.use(  
 (response) => {  
 // 請求完成，清除緩存  
 const requestKey = generateRequestKey(response.config);  
 requestCache.delete(requestKey);  
 return response.data;  
 },  
 (error) => {  
 // 請求失敗，同樣清除緩存（避免緩存失敗狀態(tài)）  
 if (error.config) {  
 const requestKey = generateRequestKey(error.config);  
 requestCache.delete(requestKey);  
 }  
 return Promise.reject(error);  
 }  
);  
  
// 生成請求唯一標(biāo)識：基于URL、方法、params、data的哈希值  
function generateRequestKey(config) {  
 const { url, method, params, data } = config;  
 const requestStr = JSON.stringify({ url, method, params, data });  
 // 使用sha256生成哈希值，確保唯一性  
 return sha256(requestStr);  
}  
  
export default service;  

import axios from 'axios';  
import { sha256 } from 'js-sha256';  
  
// 管理未完成的寫請求：key=請求唯一標(biāo)識，value=AbortController  
const pendingWriteRequests = new Map();  
  
// 寫請求專用Axios實例  
const writeService = axios.create({  
 baseURL: import.meta.env.VITE_API_BASE_URL,  
 timeout: 5000  
});  
  
// 發(fā)起寫請求（如POST/PUT/DELETE）  
export function sendWriteRequest(config) {  
 // 1. 生成請求唯一標(biāo)識  
 const requestKey = generateRequestKey(config);  
   
 // 2. 檢查是否存在未完成的相同請求：若有，取消新請求  
 if (pendingWriteRequests.has(requestKey)) {  
 const newController = new AbortController();  
 // 取消新請求  
 newController.abort('重復(fù)請求已取消');  
 return Promise.reject(new Error('重復(fù)請求已取消'));  
 }  
   
 // 3. 創(chuàng)建AbortController，用于取消請求  
 const controller = new AbortController();  
 const newConfig = {  
 ...config,  
 signal: controller.signal // 綁定取消信號  
 };  
   
 // 4. 將請求標(biāo)識和取消控制器存入容器  
 pendingWriteRequests.set(requestKey, controller);  
   
 // 5. 發(fā)送請求，完成后清除容器  
 return writeService(newConfig)  
 .then((response) => {  
 pendingWriteRequests.delete(requestKey);  
 return response.data;  
 })  
 .catch((error) => {  
 pendingWriteRequests.delete(requestKey);  
 // 過濾"主動取消"的錯誤，避免業(yè)務(wù)層處理  
 if (error.name === 'AbortError') {  
 console.log('請求已取消:', requestKey);  
 return Promise.reject(new Error('請求已取消'));  
 }  
 return Promise.reject(error);  
 });  
}  
  
// 生成請求唯一標(biāo)識（同方案2）  
function generateRequestKey(config) {  
 const { url, method, params, data } = config;  
 const requestStr = JSON.stringify({ url, method, params, data });  
 return sha256(requestStr);  
}  
  
// 手動取消指定請求（如頁面卸載時）  
export function cancelWriteRequest(config) {  
 const requestKey = generateRequestKey(config);  
 if (pendingWriteRequests.has(requestKey)) {  
 const controller = pendingWriteRequests.get(requestKey);  
 controller.abort('手動取消請求');  
 pendingWriteRequests.delete(requestKey);  
 }  
}  
  
export default writeService;  

import axios from 'axios';  
import { sha256 } from 'js-sha256';  
  
class RequestSubscriber {  
 // 容器：key=請求唯一標(biāo)識，value={ promise: 請求Promise, subscribers: 訂閱者列表 }  
 constructor() {  
 this.requestStore = new Map();  
 this.instance = axios.create({  
 baseURL: import.meta.env.VITE_API_BASE_URL,  
 timeout: 5000  
 });  
 }  
  
 // 發(fā)起請求（訂閱）  
 request(config) {  
 const requestKey = this.generateRequestKey(config);  
 const storeItem = this.requestStore.get(requestKey);  
  
 // 1. 若請求已存在，添加訂閱者  
 if (storeItem) {  
 return new Promise((resolve, reject) => {  
 storeItem.subscribers.push({ resolve, reject });  
 });  
 }  
  
 // 2. 若請求不存在，創(chuàng)建請求并訂閱  
 const subscribers = [];  
 const controller = new AbortController();  
 const newConfig = { ...config, signal: controller.signal };  
  
 // 創(chuàng)建請求Promise  
 const requestPromise = this.instance(newConfig)  
 .then((response) => {  
 // 請求成功，通知所有訂閱者  
 this.notifySubscribers(requestKey, 'resolve', response.data);  
 return response.data;  
 })  
 .catch((error) => {  
 // 請求失敗，通知所有訂閱者  
 this.notifySubscribers(requestKey, 'reject', error);  
 return Promise.reject(error);  
 })  
 .finally(() => {  
 // 請求完成，清除容器  
 this.requestStore.delete(requestKey);  
 });  
  
 // 存入容器  
 this.requestStore.set(requestKey, {  
 promise: requestPromise,  
 subscribers,  
 controller  
 });  
  
 // 返回當(dāng)前訂閱的Promise  
 return new Promise((resolve, reject) => {  
 subscribers.push({ resolve, reject });  
 });  
 }  
  
 // 通知所有訂閱者  
 notifySubscribers(requestKey, type, data) {  
 const storeItem = this.requestStore.get(requestKey);  
 if (!storeItem) return;  
  
 storeItem.subscribers.forEach((subscriber) => {  
 subscriber[type](data);  
 });  
 }  
  
 // 取消請求（如組件卸載）  
 cancelRequest(config) {  
 const requestKey = this.generateRequestKey(config);  
 const storeItem = this.requestStore.get(requestKey);  
 if (storeItem) {  
 // 取消請求  
 storeItem.controller.abort('請求已取消');  
 // 清除容器  
 this.requestStore.delete(requestKey);  
 }  
 }  
  
 // 生成請求唯一標(biāo)識  
 generateRequestKey(config) {  
 const { url, method, params, data } = config;  
 const requestStr = JSON.stringify({ url, method, params, data });  
 return sha256(requestStr).slice(0, 40); // 截取前40位，平衡唯一性和長度  
 }  
}  
  
// 單例模式：確保全局只有一個實例  
export const requestSubscriber = new RequestSubscriber();  

import axios from 'axios';  
import { v4 as uuidv4 } from 'uuid';  
  
const service = axios.create({  
 baseURL: import.meta.env.VITE_API_BASE_URL,  
 timeout: 5000  
});  
  
// 請求攔截器：添加唯一請求ID  
service.interceptors.request.use(  
 (config) => {  
 // 生成唯一請求ID（UUID）  
 const requestId = uuidv4();  
 // 存入請求頭  
 config.headers['X-Request-ID'] = requestId;  
 // 存入localStorage，用于后續(xù)重復(fù)請求判斷（可選）  
 localStorage.setItem(`request_${requestId}`, 'pending');  
 return config;  
 },  
 (error) => Promise.reject(error)  
);  
  
// 響應(yīng)攔截器：處理重復(fù)請求錯誤  
service.interceptors.response.use(  
 (response) => {  
 const requestId = response.config.headers['X-Request-ID'];  
 // 請求完成，刪除localStorage中的標(biāo)識  
 localStorage.removeItem(`request_${requestId}`);  
 return response.data;  
 },  
 (error) => {  
 if (error.response?.data?.code === 'DUPLICATE_REQUEST') {  
 // 后端返回重復(fù)請求錯誤，提示用戶  
 message.warning('請勿重復(fù)操作');  
 const requestId = error.config.headers['X-Request-ID'];  
 localStorage.removeItem(`request_${requestId}`);  
 return Promise.reject(new Error('重復(fù)請求已攔截'));  
 }  
 return Promise.reject(error);  
 }  
);  
  
export default service;  
``

**后端部分（Node.js + Redis）**：

``const express = require('express');  
const redis = require('redis');  
const { v4: uuidv4 } = require('uuid');  
  
const app = express();  
const redisClient = redis.createClient({  
 url: process.env.REDIS_URL  
});  
redisClient.connect();  
  
// 重復(fù)請求攔截中間件  
app.use(async (req, res, next) => {  
 const requestId = req.headers['x-request-id'];  
 if (!requestId) {  
 return res.status(400).json({ code: 'INVALID_REQUEST', message: '缺少請求ID' });  
 }  
  
 // 檢查Redis中是否存在該請求ID  
 const exists = await redisClient.exists(`request:${requestId}`);  
 if (exists) {  
 // 已存在，判定為重復(fù)請求  
 return res.status(400).json({ code: 'DUPLICATE_REQUEST', message: '重復(fù)請求已攔截' });  
 }  
  
 // 不存在，存入Redis（設(shè)置5秒過期，避免內(nèi)存泄漏）  
 await redisClient.setEx(`request:${requestId}`, 5, 'pending');  
 next();  
});  
  
// 業(yè)務(wù)接口  
app.post('/api/submit-form', (req, res) => {  
 // 處理表單提交邏輯  
 res.json({ code: 'SUCCESS', message: '提交成功' });  
});  
  
app.listen(3000, () => {  
 console.log('Server running on port 3000');  
});