點(diǎn)擊標(biāo)簽頁(yè)的時(shí)候，如果當(dāng)前標(biāo)簽頁(yè)有數(shù)據(jù)就不再請(qǐng)求？

想問(wèn)的其實(shí)就是這類(lèi)場(chǎng)景：
網(wǎng)絡(luò)請(qǐng)求如果成功了，下次再觸發(fā)的時(shí)候就不再向后臺(tái)進(jìn)行請(qǐng)求了。
最常見(jiàn)的就是標(biāo)簽頁(yè)的點(diǎn)擊事件了，比如首先進(jìn)來(lái)是分類(lèi)A，默認(rèn)請(qǐng)求加載分類(lèi)A的數(shù)據(jù)；然后點(diǎn)擊分類(lèi)B，請(qǐng)求加載分類(lèi)B的數(shù)據(jù)；如果再回過(guò)頭點(diǎn)擊分類(lèi)A，就不再向后臺(tái)請(qǐng)求數(shù)據(jù)了，點(diǎn)擊分類(lèi)B也不再向后臺(tái)請(qǐng)求數(shù)據(jù)了。請(qǐng)求成功的標(biāo)簽頁(yè)就不再向后臺(tái)請(qǐng)求數(shù)據(jù)了，直接顯示之前請(qǐng)求的數(shù)據(jù)就可以了。當(dāng)然，如果請(qǐng)求失敗的標(biāo)簽頁(yè)，再次點(diǎn)擊就得再跟后臺(tái)要數(shù)據(jù)了。
請(qǐng)問(wèn)有什么實(shí)現(xiàn)方式？
備注：React項(xiàng)目

回答

編輯回答

淡墨

其實(shí)就是做一個(gè)緩存處理嘛。

可以創(chuàng)建一個(gè)數(shù)組，數(shù)據(jù)結(jié)構(gòu)可以是這樣的：

const cacheData = [
  { tab: "", data: {} },
  { tab: "", data: {} },
  .....
]

每當(dāng)你成功請(qǐng)求一個(gè)標(biāo)簽后，可以將對(duì)于的數(shù)據(jù)緩存里面，然后再次請(qǐng)求此標(biāo)簽的時(shí)候，去數(shù)組里面找，如果找到則使用緩存的數(shù)據(jù)，如果沒(méi)找到，則請(qǐng)求API。

當(dāng)然這種情況適用于，標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)不變的情況下，如果數(shù)據(jù)可能隨時(shí)改變，那你就要時(shí)時(shí)請(qǐng)求API.

2017年5月1日 02:18

編輯回答

澐染

很明顯可以用狀態(tài)管理。就跟其他人說(shuō)的差不多，將數(shù)據(jù)緩存起來(lái)，需要用時(shí)拿來(lái)判斷

2018年8月23日 14:54

編輯回答

糖果果

用 redux 作為狀態(tài)機(jī)。
在 dispatch action (請(qǐng)求數(shù)據(jù)的 action)時(shí)，先通過(guò) getState() 去判斷是否特定的數(shù)據(jù)是否已經(jīng)存在，如果存在，則 return Promise.resolve(). 如果不存在，return fetch(https://xxxx).

2017年10月12日 05:41