vue实现请求加锁
请求加锁的实现方式
在Vue中实现请求加锁通常是为了防止重复提交或并发请求导致的数据不一致问题。以下是几种常见的实现方法：
使用标志位控制请求状态
在组件或Store中定义一个布尔类型的标志位（如isLoading），在请求开始时设置为true，请求结束后重置为false。通过该标志位判断是否允许发起新请求。
data() {
return {
isLoading: false
}
},
methods: {
async fetchData() {
if (this.isLoading) return;
this.isLoading = true;
try {
const res = await axios.get('/api/data');
// 处理响应
} finally {
this.isLoading = false;
}
}
}基于Promise的请求队列
对于需要严格保证顺序的场景，可以维护一个请求队列。只有当上一个请求完成时，才允许执行下一个请求。
let pendingPromise = null;
async function lockedRequest(config) {
if (pendingPromise) {
return pendingPromise;
}
pendingPromise = axios(config);
try {
return await pendingPromise;
} finally {
pendingPromise = null;
}
}使用拦截器实现全局锁
通过axios拦截器全局控制请求锁定，适用于需要统一管理的场景。
let isLocked = false;
axios.interceptors.request.use(config => {
if (isLocked) {
return Promise.reject(new Error('Request locked'));
}
isLocked = true;
return config;
});
axios.interceptors.response.use(
response => {
isLocked = false;
return response;
},
error => {
isLocked = false;
return Promise.reject(error);
}
);基于Vuex的状态管理
当多个组件需要共享请求状态时，可以通过Vuex集中管理锁状态。
// store.js
state: {
requestLock: false
},
mutations: {
setRequestLock(state, status) {
state.requestLock = status;
}
},
actions: {
async fetchData({ commit, state }) {
if (state.requestLock) return;
commit('setRequestLock', true);
try {
const res = await axios.get('/api/data');
// 处理响应
} finally {
commit('setRequestLock', false);
}
}
}防抖函数实现请求锁定
对于频繁触发的请求（如搜索框输入），可以使用防抖函数确保在一定时间间隔内只执行一次请求。
import _ from 'lodash';
methods: {
fetchData: _.debounce(async function() {
const res = await axios.get('/api/data');
// 处理响应
}, 500)
}注意事项
- 确保在请求失败时也能正确释放锁，避免永久锁定
- 考虑添加超时机制防止长时间锁定
- 对于关键操作可以结合前端锁和后端校验双重保障
- 根据实际场景选择局部锁或全局锁的实现方式
