怎么解决Vue中多个相同组件重复请求的解决问题？

作者：事业有成的张啦啦 2023-04-18 22:32:16开发 开发工具 这种情况下的 getSignature 最好是 Singleton 的，可以写个模块导出。中组件重复mixin 里的多个的问 getSignatrue 都直接引用或调用这个 Singleton 的 getSignature。

现在因为有个上传组件他用到了这个mixin文件，相同这个mixin文件中mounted请求了接口，请求这样一个页面中如果有多个上传组件的解决话，那么就会导致一上来就会一次性请求多个重复的中组件重复接口，有什么好点的多个的问方法吗，如果不放在vuex中的相同话。

解决方法：

这种情况下的请求 getSignature 最好是 Singleton 的，可以写个模块导出。解决mixin 里的中组件重复 getSignatrue 都直接引用或调用这个 Singleton 的 getSignature。

因为大家都调同一个 Signature，多个的问那么可以在这里做一些判断和处理，相同基本思路就是请求，

• 有缓存拿缓存
• 没缓存判断如果是第 1 个请求的，就去请求远端
• 如果不是第 1 个请求的，就等

let cache = null;
let count = 0;

async function delay(ms = 200) { 
return new Promise(resolve => setTimeout(resolve, ms));
}

export async function getSignature() { 
if (cache) {  return cache; }

if (count++) { 
// 如果有计数说明自己不是第 1 个，就等。注意这里判断的是加之前的 count
// 循环里最好再加个超时判断
while (!cache) {  await delay(); }
} else { 
// 是第 1 个就去请求
// 如果这里有可能会抛异常，抛异常也不要漏了 count--
// （这个示例代码没做容错，自己加）
cache = await fetchSignature();
}

count--;    // 记得减回去，方便以后如果要刷新 cache 的时候用
return cache;
}

责任编辑：武晓燕 来源： 前端阳光 Singletonget组件

(责任编辑：百科)