为 axios 设置延迟在 useEffect 中获取请求

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);
  }
});

我知道我的代码不够专业，我对 web 开发人员还是新手，请随时发表任何意见以使流程更好，并在编码技术方面给我建议。

谢谢你！

Answer 1

这是因为每次您的请求中出现错误时，您都会一次又一次地更新 state 和 useEffect function 。

您可以使用以下逻辑根据错误实施检查：

如果请求出现错误，请等待预定义的时间并获取数据，否则立即获取数据：

  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 重试策略并避免在出现错误时使用错误更新 state，但第一个解决方案已经足够好了。