現在因為有個上傳組件他用到了這個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;
}