前言
防止接口重复请求在软件开发中非常重要，重复请求必然会导致服务器资源的浪费。 因为每次请求都需要服务器进行处理，如果请求是重复的，那么服务器就在做不必要的工作。在高并发的场景下，这种浪费会成倍增加，可能导致服务器性能下降，甚至引发服务崩溃。
请求队列：
维护一个请求队列，每次发送请求前检查队列中是否已经存在相同的请求。如果存在相同请求，则不再发送，直接使用队列中的请求结果。这种方法可以确保相同请求只发送一次。
代码语言：javascript复制class RequestQueue {
constructor() {
this.queue = {};
}
addRequest(url, callback) {
if (this.queue[url]) {
// 如果队列中已有相同请求，则直接使用之前的请求结果
this.queue[url].callbacks.push(callback);
return;
}
this.queue[url] = {
callbacks: [callback],
// 假设这里使用fetch进行请求
promise: fetch(url).then(response => {
const data = response.json();
this.queue[url].callbacks.forEach(cb => cb(data));
delete this.queue[url]; // 请求完成后从队列中移除
})
};
}
}
// 使用
const queue = new RequestQueue();
queue.addRequest('https://api.example.com/data', data => {
console.log(data);
});请求取消：
在发送请求前，记录当前正在进行的请求，并在发送新请求时先取消之前的请求。可以使用 Axios 等库提供的取消请求功能来实现。
代码语言：javascript复制import axios from 'axios';
let cancelTokenSource;
function fetchData() {
if (cancelTokenSource) {
cancelTokenSource.cancel('Operation canceled by the user.'); // 取消之前的请求
}
cancelTokenSource = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: cancelTokenSource.token
}).then(response => {
console.log(response.data);
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
}
// 调用fetchData时会取消之前的请求（如果存在）
fetchData();防抖（Debounce）：
使用防抖函数控制请求的发送频率，确保在一段时间内只发送一次请求。这样可以避免频繁的重复请求。
比较容易理解，代码示例略了吧。
节流（Throttle）：
与防抖类似，节流函数可以控制一段时间内请求的频率，但不会像防抖那样在每次触发事件后立即执行，而是在固定间隔内执行一次。
比较容易理解，代码示例略了吧。
请求标识：
为每个请求设置唯一标识，当新请求到来时，先检查是否存在相同标识的请求，如果存在则不发送新请求。
比较容易理解，代码示例略了吧。
缓存请求结果：
对于相同的请求，在第一次请求返回结果后将结果缓存起来，后续相同的请求可以直接使用缓存的结果，而不再发送重复请求。
比较容易理解，代码示例略了吧。
使用状态管理库：
在 Vue 应用中，可以结合状态管理库（如 Vuex、Pinia）来管理请求状态，确保只有一个请求在进行，避免重复请求。
代码语言：javascript复制// Vuex store配置
const store = new Vuex.Store({
state: {
isFetching: false,
data: null
},
mutations: {
FETCH_START(state) {
state.isFetching = true;
},
FETCH_END(state, data) {
state.isFetching = false;
state.data = data;
}
},
actions: {
fetchData({ commit }) {
if (this.state.isFetching) {
return; // 如果已经在请求数据，则不再发送新请求
}
commit('FETCH_START');
return fetch('https://api.example.com/data').then(response => {
return response.json();
}).then(data => {
commit('FETCH_END', data);
return data;
});
}
}
});
// 在Vue组件中使用
this.$store.dispatch('fetchData').then(data => {
console.log(data);
});本文共 644 个字数,平均阅读时长 ≈ 2分钟
