自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

怎么解決Vue中多個相同組件重復(fù)請求的問題?

開發(fā) 開發(fā)工具
這種情況下的 getSignature 最好是 Singleton 的,可以寫個模塊導(dǎo)出。mixin 里的 getSignatrue 都直接引用或調(diào)用這個 Singleton 的 getSignature。

現(xiàn)在因為有個上傳組件他用到了這個mixin文件,這個mixin文件中mounted請求了接口,這樣一個頁面中如果有多個上傳組件的話,那么就會導(dǎo)致一上來就會一次性請求多個重復(fù)的接口,有什么好點的方法嗎,如果不放在vuex中的話。

解決方法:

這種情況下的 getSignature 最好是 Singleton 的,可以寫個模塊導(dǎo)出。mixin 里的 getSignatrue 都直接引用或調(diào)用這個 Singleton 的 getSignature。

因為大家都調(diào)同一個 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++) {
// 如果有計數(shù)說明自己不是第 1 個,就等。注意這里判斷的是加之前的 count
// 循環(huán)里最好再加個超時判斷
while (!cache) { await delay(); }
} else {
// 是第 1 個就去請求
// 如果這里有可能會拋異常,拋異常也不要漏了 count--
// (這個示例代碼沒做容錯,自己加)
cache = await fetchSignature();
}

count--; // 記得減回去,方便以后如果要刷新 cache 的時候用
return cache;
}


責任編輯:武曉燕 來源: 前端陽光
相關(guān)推薦

2020-03-25 18:23:07

Vue2Vue3組件

2022-03-29 12:01:57

Vue 組件js組件工具集

2023-10-17 07:23:00

Vue組件代碼

2024-06-06 08:46:37

2020-04-08 18:29:20

Vue組件屬性

2023-11-17 09:38:21

2020-12-14 06:57:37

shell

2024-05-20 09:52:55

自動駕駛場景

2024-07-10 08:39:49

2024-10-17 10:25:34

2023-04-21 15:26:33

云計算云基礎(chǔ)架構(gòu)組件

2021-06-08 08:38:36

MySQL數(shù)據(jù)庫死鎖問題

2020-03-22 11:20:16

Vue開發(fā)前端

2024-07-10 10:38:58

Vue組件函數(shù)

2010-09-29 15:55:22

DHCP IP相同

2021-11-30 10:00:01

SQL數(shù)據(jù)重復(fù)

2021-06-17 09:32:39

重復(fù)請求并發(fā)請求Java

2024-03-27 07:55:58

SpringRedis海量

2023-02-27 08:08:54

Pulsar源碼重復(fù)消費

2022-08-27 15:15:31

iOS耗電后臺
點贊
收藏

51CTO技術(shù)棧公眾號