前端如何防止重复请求：使用节流和防抖技术、借助Loading状态、通过请求锁机制、使用唯一请求ID、利用缓存机制。其中，使用节流和防抖技术是最常见且有效的方法之一，通过控制函数执行频率，避免短时间内多次请求同一资源，提升性能。
一、使用节流和防抖技术
1. 节流（Throttling）
节流是一种在一定时间内只允许函数执行一次的技术。通过设置一个时间间隔，确保在该时间内不会重复触发请求。节流常用于窗口滚动、按钮点击等频繁触发的操作。
实现方法：
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
}
}
2. 防抖（Debouncing）
防抖是一种在一定时间内不触发后续请求的技术。只有当触发行为停止后，才会执行最后一次请求。防抖常用于输入框搜索、窗口调整等操作。
实现方法：
function debounce(func, delay) {
let debounceTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
}
}
二、借助Loading状态
1. 使用Loading状态
通过在请求发送前设置一个loading状态，在请求完成后取消loading状态，可以防止在请求未完成前再次触发相同请求。
实现方法：
let isLoading = false;
function fetchData() {
if (isLoading) return;
isLoading = true;
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
isLoading = false;
})
.catch(error => {
console.error(error);
isLoading = false;
});
}
2. 利用UI组件的Loading属性
在前端框架如React、Vue中，常使用组件的loading属性来控制请求状态，避免重复请求。
React 示例：
const [loading, setLoading] = useState(false);
function fetchData() {
if (loading) return;
setLoading(true);
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
setLoading(false);
})
.catch(error => {
console.error(error);
setLoading(false);
});
}
三、通过请求锁机制
1. 请求锁机制
请求锁是一种在请求开始时加锁，完成时解锁的机制，确保同一时间只有一个请求在进行。请求锁机制适合用于需要严格控制请求顺序的场景。
实现方法：
let requestLock = false;
function fetchData() {
if (requestLock) return;
requestLock = true;
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
requestLock = false;
})
.catch(error => {
console.error(error);
requestLock = false;
});
}
2. 使用Promise锁
通过Promise实现请求锁，确保同一时间只允许一个请求进行。
示例：
let requestPromise = Promise.resolve();
function fetchData() {
requestPromise = requestPromise.then(() => new Promise((resolve) => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
resolve();
})
.catch(error => {
console.error(error);
resolve();
});
}));
}
四、使用唯一请求ID
1. 唯一请求ID机制
通过生成唯一的请求ID，在每次请求时检查该ID是否已存在，避免重复请求。该方法适用于需要识别请求身份的场景。
实现方法：
const requestMap = new Map();
function fetchData(requestID) {
if (requestMap.has(requestID)) return;
requestMap.set(requestID, true);
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
requestMap.delete(requestID);
})
.catch(error => {
console.error(error);
requestMap.delete(requestID);
});
}
2. 利用UUID生成唯一请求ID
使用UUID生成唯一请求ID，确保每个请求具有唯一标识。
示例：
import { v4 as uuidv4 } from 'uuid';
const requestMap = new Map();
function fetchData() {
const requestID = uuidv4();
if (requestMap.has(requestID)) return;
requestMap.set(requestID, true);
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
requestMap.delete(requestID);
})
.catch(error => {
console.error(error);
requestMap.delete(requestID);
});
}
五、利用缓存机制
1. 前端缓存
通过在前端缓存请求结果，避免在短时间内重复请求相同资源。前端缓存适用于需要频繁访问且结果不频繁变化的资源。
实现方法：
const cache = new Map();
function fetchData(url) {
if (cache.has(url)) {
return Promise.resolve(cache.get(url));
}
return fetch(url)
.then(response => response.json())
.then(data => {
cache.set(url, data);
return data;
});
}
2. 利用Service Worker
通过Service Worker缓存请求结果，在前端实现更复杂的缓存策略，提升应用性能。
示例：
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request).then(
response => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open('my-cache')
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
3. HTTP缓存
利用HTTP缓存头部如Cache-Control、ETag等，通过服务端控制缓存策略，减少前端重复请求。
示例：
Cache-Control: max-age=3600
ETag: "12345"
在前端请求中，可以利用这些缓存头部，减少重复请求。
fetch('https://api.example.com/data', {
headers: {
'If-None-Match': '12345'
}
})
.then(response => {
if (response.status === 304) {
console.log('Data is cached');
} else {
return response.json();
}
})
.then(data => {
if (data) {
console.log(data);
}
})
.catch(error => {
console.error(error);
});
六、总结
在前端开发中，防止重复请求是提升性能和用户体验的重要一环。通过使用节流和防抖技术、借助Loading状态、请求锁机制、唯一请求ID以及缓存机制，可以有效地避免重复请求。在实际开发中，可以根据不同的场景和需求，灵活组合这些方法，以实现最佳效果。
推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以便更好地进行项目管理和团队协作，提升开发效率。
相关问答FAQs：
1. 如何在前端防止重复请求？
重复请求是指在同一时间段内多次发送相同的请求到服务器。为了防止重复请求，可以采取以下措施：
- 使用防抖函数：防抖函数可以延迟触发函数的执行，在一定时间内只执行一次。可以在发送请求前使用防抖函数，确保只发送最后一次请求。
- 使用节流函数：节流函数可以限制一定时间内函数的执行次数。可以在发送请求前使用节流函数，确保在一定时间内只发送一次请求。
- 添加请求标识：在发送请求时，可以为每个请求添加一个唯一的标识符。在接收到服务器的响应后，可以根据标识符判断是否已经处理过该请求，如果已经处理过，则不再处理。
- 禁用按钮：在发送请求前，可以禁用相应的按钮，防止用户重复点击发送请求。
- 使用缓存：可以使用缓存机制，在接收到服务器的响应后，将响应结果缓存起来。当下次需要相同数据时，可以直接从缓存中获取，避免重复发送请求。
2. 如何避免前端重复请求对服务器造成压力？
重复请求会给服务器带来额外的负担，为了避免对服务器造成过大的压力，可以采取以下措施：
- 合并请求：如果有多个请求需要发送到服务器，可以将这些请求合并为一个请求，减少请求的次数。
- 设置请求频率限制：可以限制每个用户在一定时间内发送请求的次数，避免恶意或频繁的请求。
- 使用缓存：可以使用缓存机制，在接收到服务器的响应后，将响应结果缓存起来。当下次需要相同数据时，可以直接从缓存中获取，减少对服务器的请求。
- 优化数据传输：可以通过压缩数据、减少数据量等方式来优化数据传输，减少对服务器的请求负载。
3. 如何在前端防止重复提交表单？
重复提交表单是指用户在短时间内多次提交相同的表单数据到服务器。为了防止重复提交表单，可以采取以下措施：
- 禁用提交按钮：在用户点击提交按钮后，可以立即禁用该按钮，防止用户重复点击提交。
- 添加表单提交标识：在提交表单时，可以为每次提交生成一个唯一的标识符，将该标识符与表单数据一起提交到服务器。在服务器端接收到表单数据时，可以根据标识符判断是否已经处理过该表单数据，如果已经处理过，则不再处理。
- 使用token验证：可以在表单中添加一个token字段，每次提交表单时，生成一个唯一的token，并将该token保存在服务器端。在服务器端接收到表单数据时，可以验证token的有效性，如果token无效，则认为是重复提交的表单数据，不再处理。
- 使用表单hash值校验：可以在前端计算表单数据的hash值，并将该hash值与表单数据一起提交到服务器。在服务器端接收到表单数据时，可以计算表单数据的hash值，并与提交的hash值进行比较，如果hash值相同，则认为是重复提交的表单数据，不再处理。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/2207159
