首頁(yè) 猿問(wèn) 點(diǎn)擊標(biāo)簽頁(yè)的時(shí)候，如果當(dāng)前標(biāo)簽頁(yè)有...

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

JavaScript

狐的傳說(shuō) 2019-05-23 11:17:14

想問(wèn)的其實(shí)就是這類場(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)是分類A，默認(rèn)請(qǐng)求加載分類A的數(shù)據(jù)；然后點(diǎn)擊分類B，請(qǐng)求加載分類B的數(shù)據(jù)；如果再回過(guò)頭點(diǎn)擊分類A，就不再向后臺(tái)請(qǐng)求數(shù)據(jù)了，點(diǎn)擊分類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)目

查看完整描述

2 回答

素胚勾勒不出你

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊

其實(shí)就是做一個(gè)緩存處理嘛。可以創(chuàng)建一個(gè)數(shù)組，數(shù)據(jù)結(jié)構(gòu)可以是這樣的：constcacheData=[{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.

反對(duì) 回復(fù) 2019-05-23

千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

反對(duì) 回復(fù) 2019-05-23