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

开发 开发工具
这种情况下的 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;
}


责任编辑:武晓燕 来源: 前端阳光
相关推荐

2020-03-25 18:23:07

Vue2Vue3组件

2022-03-29 12:01:57

Vue 组件js组件工具集

2023-10-17 07:23:00

Vue组件代码

2020-04-08 18:29:20

Vue组件属性

2023-11-17 09:38:21

2023-04-21 15:26:33

云计算云基础架构组件

2020-12-14 06:57:37

shell

2021-06-08 08:38:36

MySQL数据库死锁问题

2021-06-17 09:32:39

重复请求并发请求Java

2020-03-22 11:20:16

Vue开发前端

2010-09-29 15:55:22

DHCP IP相同

2021-11-30 10:00:01

SQL数据重复

2022-08-27 15:15:31

iOS耗电后台

2023-04-19 15:29:53

通信技巧Vue 3开发

2022-05-06 08:47:10

Vue 3组件前端

2023-04-26 15:17:33

Vue 3开发前端

2023-02-27 08:08:54

Pulsar源码重复消费

2020-09-12 16:22:27

Vue

2022-09-20 12:21:25

Vue2Vue3$attrs

2022-02-16 08:11:52

组件渲染前端
点赞
收藏

51CTO技术栈公众号