当前位置：首页 > 供求 > > 正文

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

来源：前端阳光    时间：2023-04-19 11:03:18


(相关资料图)

现在因为有个上传组件他用到了这个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;}

关键词：

上一篇：沙尘暴预警！新疆内蒙古等11省区市有扬沙或浮尘天气

下一篇：最后一页

精心推荐

X 关闭

资讯

2021年国家开发银行全年发放贷款5948亿元支持乡村振兴

行业排行

X 关闭

产业