最近在使用axios請求json文件時發現,每次請求得到的數據都是緩存中的數據。經過查詢,發現可以通過添加時間戳來解決這個問題。
axios.get('data.json?t=' + new Date().getTime()) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); });
上述代碼中,我們在請求url中添加了"?"和時間戳,這樣每次請求的url都是不同的,就可以避免緩存的問題了。
如果我們多次請求同一個json文件,并且希望緩存時間為5分鐘,可以使用以下代碼:
let cacheTime = 300000; // 緩存時間為5分鐘 let lastRequestTime = 0; // 上次請求時間 function requestJson() { let currentTime = new Date().getTime(); if ((currentTime - lastRequestTime) >cacheTime) { axios.get('data.json?t=' + new Date().getTime()) .then(function(response) { console.log(response.data); lastRequestTime = currentTime; }) .catch(function(error) { console.log(error); }); } else { console.log('使用緩存數據'); } } requestJson(); // 第一次請求 setTimeout(requestJson, 60000); // 1分鐘后再次請求 setTimeout(requestJson, 300000); // 5分鐘后再次請求
上述代碼中,我們通過判斷上次請求時間和當前時間的差是否大于緩存時間來決定是否重新請求json文件。如果不需要重新請求,就輸出"使用緩存數據"。這樣可以減少不必要的請求,提高網頁運行效率。