在useEffect中为axios get请求设置延迟

Question

我正在使用 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);
  }
});

我知道我的代码不够专业，我对网络开发还是个新手，请随时提出任何意见以改善流程并给我编码技术方面的建议。

谢谢！

Answer 1

这是因为每当您的请求出现错误时，您都会更新状态，并且 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 重试策略并避免在出现错误时使用错误更新状态，但第一种解决方案就足够了。

在useEffect中为axios get请求设置延迟

Set delay for axios get request in useEffect

javascript

express

reactjs

axios

use-effect