前端如何实现同时发送多个相同请求时只发送一个？
原生实现
为了控制并发请求，可以使用以下两种常见的方式：
防抖
防抖是指在一段时间内多次触发同一事件，只执行最后一次触发的操作。在前端中，可以利用定时器来实现防抖的效果。具体实现方法如下：
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
}
}
在发送请求的地方使用防抖函数，如下所示：
const sendRequest = debounce(() => {
// 发送请求的代码
}, 500);
上述代码中，sendRequest 是一个防抖函数，它将在 500ms 后执行。如果在 500ms 内再次触发 sendRequest 函数，计时器会被重新启动，并且等待 500ms，以确保只有最后一次触发才会发送请求。
节流
节流是指在一段时间内只执行一次操作。与防抖不同的是，节流是指在一定的时间间隔内只执行一次操作。在前端中，可以使用定时器来实现节流的效果。具体实现方法如下：
function throttle(func, delay) {
let timer;
return function() {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
}
}
在发送请求的地方使用节流函数，如下所示：
const sendRequest = throttle(() => {
// 发送请求的代码
}, 500);
上述代码中，sendRequest 是一个节流函数，它将在 500ms 后执行。如果在 500ms 内再次触发 sendRequest 函数，由于计时器还没有结束，函数不会执行任何操作。只有当计时器结束后才会再次触发请求。
Vue + Axios
在 Vue 中使用 Axios 发送请求，可以使用 Axios 的 CancelToken 来取消重复的请求，从而实现并发多个相同的请求只发送一个的效果。
具体实现方法如下：
- 创建 CancelToken
首先，需要创建一个 CancelToken，用于取消请求。在 Vue 中，可以在组件的 data 中定义一个 cancelToken 对象：
data() {
return {
cancelToken: axios.CancelToken.source().token
}
}
- 发送请求时使用
CancelToken
在发送请求时，需要将定义的 cancelToken 对象作为配置的 cancelToken 属性传递给 Axios：
axios.get(url, {
cancelToken: this.cancelToken
}).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求错误
});
- 取消重复的请求
在发送新的请求之前，需要取消之前正在进行的相同请求。可以通过判断上一次请求的 CancelToken 和当前请求的 CancelToken 是否相同来实现：
if (this.lastRequestCancelToken) {
this.lastRequestCancelToken.cancel('取消重复的请求');
}
this.lastRequestCancelToken = this.cancelToken;
上述代码中，lastRequestCancelToken 是用于保存上一次请求的 CancelToken 对象的变量。在发送新的请求之前，需要先取消之前正在进行的相同请求，并将当前的 CancelToken 对象赋值给 lastRequestCancelToken 变量。
完整的实现代码如下：
data() {
return {
cancelToken: axios.CancelToken.source().token,
lastRequestCancelToken: null
}
},
methods: {
fetchData() {
if (this.lastRequestCancelToken) {
this.lastRequestCancelToken.cancel('取消重复的请求');
}
this.lastRequestCancelToken = this.cancelToken;
axios.get(url, {
cancelToken: this.cancelToken
}).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求错误
});
}
}
上述代码中，fetchData 是发送请求的方法，在方法中使用了 CancelToken 来控制并发多个相同的请求只发送一个。
使用 React 实现
如果你正在使用 React，你可以使用 axios 库来实现控制只发送一个请求的功能。具体实现如下：
import React, { useState } from 'react';
import axios from 'axios';
function App() {
const [requestCount, setRequestCount] = useState(0);
function fetchData() {
if (requestCount === 0) {
setRequestCount(1);
axios.get('http://example.com/api/data')
.then(response => {
console.log(response.data);
setRequestCount(0);
})
.catch(error => {
console.error(error);
setRequestCount(0);
});
}
}
return (
<div>
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default App;
这段代码使用了 React 的 useState 钩子函数，定义了一个状态变量 requestCount，用于记录当前正在发送的请求数量。在发送请求之前，先检查是否已经有一个请求正在处理。如果没有，则将 requestCount 设为 1，表示有一个请求正在处理。在请求成功或失败后，将 requestCount 设为 0，表示请求已经处理完毕。
更多题目
/7201…
