我正在使用 react js ，并且在渲染頁面時實作了一個 useEffect 來請求表達服務器以從資料庫中獲取資料，這是可行的，但是如果服務器關閉，它將繼續請求數千次，直到應用程式崩潰。有沒有辦法在每次重新請求之間設定延遲？或者有沒有更簡潔的解決方案？
下面是我的代碼：
useEffect(() => {
async function fetchData() {
setisLoaded(false);
axios
.get("localhost:3001/locations")
.then((response) => {
if (response.data) {
setLocations(response.data[0]);
setTown(response.data[1]);
setTowns(response.data[1]);
setDistrict(response.data[2]);
setDistricts(response.data[2]);
setGovernorate(response.data[3]);
setSector(response.data[4]);
setSubSector(response.data[5]);
setSubSectors(response.data[5]);
setlicenseType(response.data[6]);
setmarkerGroup(true);
setZoomLevel(8);
setisLoaded(true);
}
})
.catch((e) => {
seterrorFetchedChecker((c) => !c);
});
}
fetchData();
}, [errorFetchedChecker]);
快遞代碼是：
app.get("/locations", async (req, res) => {
try {
const sqlFetch =
"SELECT * FROM industries_db; SELECT * FROM towns ORDER BY value; SELECT * FROM districts ORDER BY value ; SELECT * FROM governorates ORDER BY value; SELECT * FROM sectors ORDER BY value; SELECT * FROM sub_sectors ORDER BY value; SELECT * FROM licensetype ORDER BY value ";
await db.query(sqlFetch, async (err, result) => {
if (err) {
console.log(err);
res.sendStatus(500);
} else if (result.length > 0) {
return res.send(result);
}
});
} catch (error) {
res.sendStatus(500);
}
});
我知道我的代碼不那么專業，我還是 web 開發的新手，請隨時發表任何意見以使流程更好，并在編碼技術方面給我建議。
謝謝！
uj5u.com熱心網友回復：
這是因為每次您的請求中出現錯誤時，您都會更新狀態并且 useEffect 函式會一次又一次地觸發。
您可以使用以下邏輯根據錯誤實施檢查：
如果請求出現錯誤，請等待預定義的時間并獲取資料，否則立即獲取資料：
useEffect(() => {
async function fetchData() {
setisLoaded(false);
axios
.get("localhost:3001/locations")
.then((response) => {
if (response.data) {
setLocations(response.data[0]);
setTown(response.data[1]);
setTowns(response.data[1]);
setDistrict(response.data[2]);
setDistricts(response.data[2]);
setGovernorate(response.data[3]);
setSector(response.data[4]);
setSubSector(response.data[5]);
setSubSectors(response.data[5]);
setlicenseType(response.data[6]);
setmarkerGroup(true);
setZoomLevel(8);
setisLoaded(true);
}
})
.catch((e) => {
seterrorFetchedChecker((c) => !c);
});
}
if(errorFetchedChecker){
setTimeout(()=>{
fetchData();
},[1000])// 1 second
} else {
fetchData();
}
}, [errorFetchedChecker]);
另一種解決方案是使用 axios 重試策略，如果還存在錯誤，則避免使用錯誤更新狀態，但第一種解決方案已經足夠了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/422744.html
標籤：
上一篇：錯誤處理程式中間件不處理錯誤