<返回更多

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

2023-04-18  微信公众号  前端阳光
加入收藏


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

解决方法:

这种情况下的 getSignature 最好是 Singleton 的,可以写个模块导出。mixin 里的 getSignatrue 都直接引用或调用这个 Singleton 的 getSignature。

因为大家都调同一个 Signature,那么可以在这里做一些判断和处理,基本思路就是,

 

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;
}
 

 

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>