現(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中的話。
解決方法:
這種情況下的 getSignature 最好是 Singleton 的,可以寫(xiě)個(gè)模塊導(dǎo)出。mixin 里的 getSignatrue 都直接引用或調(diào)用這個(gè) Singleton 的 getSignature。
因?yàn)榇蠹叶颊{(diào)同一個(gè) Signature,那么可以在這里做一些判斷和處理,基本思路就是,
- 有緩存拿緩存
- 沒(méi)緩存判斷如果是第 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ù)說(shuō)明自己不是第 1 個(gè),就等。注意這里判斷的是加之前的 count
// 循環(huán)里最好再加個(gè)超時(shí)判斷
while (!cache) { await delay(); }
} else {
// 是第 1 個(gè)就去請(qǐng)求
// 如果這里有可能會(huì)拋異常,拋異常也不要漏了 count--
// (這個(gè)示例代碼沒(méi)做容錯(cuò),自己加)
cache = await fetchSignature();
}
count--; // 記得減回去,方便以后如果要刷新 cache 的時(shí)候用
return cache;
}