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

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

创新互联-专业网站定制、快速模板网站建设、高性价比龙游网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式龙游网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖龙游地区。费用合理售后完善，十载实体公司更值得信赖。

解决方法：

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

新闻名称：怎么解决Vue中多个相同组件重复请求的问题？
新闻来源：http://www.shufengxianlan.com/qtweb/news25/9875.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联