建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
怎么解決Vue中多個(gè)相同組件重復(fù)請(qǐng)求的問題？
現(xiàn)在因?yàn)橛袀€(gè)上傳組件他用到了這個(gè)mixin文件，這個(gè)mixin文件中mounted請(qǐng)求了接口，這樣一個(gè)頁(yè)面中如果有多個(gè)上傳組件的話，那么就會(huì)導(dǎo)致一上來(lái)就會(huì)一次性請(qǐng)求多個(gè)重復(fù)的接口，有什么好點(diǎn)的方法嗎，如果不放在vuex中的話。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比龍游網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式龍游網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋龍游地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
解決方法：
這種情況下的 getSignature 最好是 Singleton 的，可以寫個(gè)模塊導(dǎo)出。mixin 里的 getSignatrue 都直接引用或調(diào)用這個(gè) Singleton 的 getSignature。
因?yàn)榇蠹叶颊{(diào)同一個(gè) Signature，那么可以在這里做一些判斷和處理，基本思路就是，
- 有緩存拿緩存
- 沒緩存判斷如果是第 1 個(gè)請(qǐng)求的，就去請(qǐng)求遠(yuǎn)端
- 如果不是第 1 個(gè)請(qǐng)求的，就等
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++) {
// 如果有計(jì)數(shù)說明自己不是第 1 個(gè)，就等。注意這里判斷的是加之前的 count
// 循環(huán)里最好再加個(gè)超時(shí)判斷
while (!cache) { await delay(); }
} else {
// 是第 1 個(gè)就去請(qǐng)求
// 如果這里有可能會(huì)拋異常，拋異常也不要漏了 count--
// （這個(gè)示例代碼沒做容錯(cuò)，自己加）
cache = await fetchSignature();
}
count--; // 記得減回去，方便以后如果要刷新 cache 的時(shí)候用
return cache;
}
本文標(biāo)題：怎么解決Vue中多個(gè)相同組件重復(fù)請(qǐng)求的問題？
網(wǎng)站地址：http://www.5511xx.com/article/cccscps.html
