前端的异步请求,添加锁
起因
element-ui中,及联选择器异步获取下拉框,存在重复申请


element-ui j及联选择器配置

解决办法
pinia 缓存和 添加请求锁
pinia中
const locks = new Map();
/* 添加锁 */
async function waitForLock(key) {
if (locks.has(key)) {
return new Promise((resolve) => {
locks.get(key).push(resolve);
});
} else {
locks.set(key, []);
}
}
/* 释放锁 */
function releaseLock(key) {
const lock = locks.get(key);
if (lock && lock.length > 0) {
lock.shift()();
} else {
locks.delete(key);
}
}
const useFieldStore = defineStore(
"field",
{
state: () => ({
list: new Set(),
keep: {},
}),
actions: {
getField(params) {
return new Promise(async (resolve, reject) => {
const key = JSON.stringify(params);
// 读取缓存
if (this.list.has(key) && this.keep[key]) {
resolve(this.keep[key]);
return;
}
// 等待锁
await waitForLock(key);
// 再次读取缓存,因为可能已经被其他请求获取到了
if (this.list.has(key) && this.keep[key]) {
resolve(this.keep[key]);
releaseLock(key);
return;
}
const { data } = await findIndicatorOptions(params);
this.list.add(key);
this.keep[key] = data;
releaseLock(key);
resolve(data);
});
}
}
});

浙公网安备 33010602011771号