为什么我的提取请求在很短的时间内给我很多错误

Question

所以我每次加载页面时都必须进行一次获取调用，并且页面将保持加载状态，直到获取数据为止。所以我在一个单独的文件上创建了一个函数，该函数有 3 个参数（link，数据的 setState，加载的 setState），函数看起来像这样：

        async function fetchingObj(link, dataFunc, loadingFunc){

    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `JWT ${localStorage.getItem('access')}`
    }

    try{

        let data = await fetch(link, { headers }).then(data => data.json())

        if(typeof data === "object" || typeof data === "string"){
           
            dataFunc(data)
            loadingFunc(false)
        }

        else{
            setTimeout( fetchingObj(), 1500 )
            console.log('from else', data);
        }
    }
    
    catch(err){
        setTimeout( fetchingObj(), 1500 )
    }
}

然后我将它导入我的页面并在我的 useEffect

中调用它

useEffect(() =>{
    fetchingObj(process.env.REACT_APP_API_URL + `/api/polls/${parameters.num}/`, setPoll, setLOading)
    //eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

所以此功能的目的是，如果我的服务器出现故障，页面将保持加载状态并每 1.5 秒重新获取一次，直到我的服务器恢复正常运行。然而，当我通过关闭我的服务器来测试它时，我得到了像这样的每秒 100 次错误当我的服务器重新启动时，我仍然需要刷新，为什么会这样？

非常感谢

Answer 1

正如 ReactJS 在 Github issue 中正式宣布的那样，它不会像您所写的那样工作。

尝试关注

useEffect(() => {
  async function fetchingObj(link, dataFunc, loadingFunc) {
    const headers = {
      "Content-Type": "application/json",
      Authorization: `JWT ${localStorage.getItem("access")}`,
    };

    try {
      let data = await fetch(link, { headers }).then((data) => data.json());

      if (typeof data === "object" || typeof data === "string") {
        dataFunc(data);
        loadingFunc(false);
      } else {
        setTimeout(fetchingObj(), 1500);
        console.log("from else", data);
      }
    } catch (err) {
      setTimeout(fetchingObj(), 1500);
    }
  }

  fetchingObj(
    process.env.REACT_APP_API_URL + `/api/polls/${parameters.num}/`,
    setPoll,
    setLOading,
  );
}, []);

Answer 2

问题是您对 setTimeout 的调用 - 您是立即调用函数，而不是在 1500 毫秒后将函数排队到运行。

setTimeout( fetchingObj(), 1500 )

这应该是-

setTimeout(fetchingObj, 1500);

或者理想情况下，您应该使用相同的参数调用它（我猜是吧？）-

setTimeout(() => fetchingObj(link, dataFunc, loadingFunc), 1500)

Here's a stackblitz that shows the problem and the solution.

为什么我的提取请求在很短的时间内给我很多错误

Why is my fetch request giving me a lot of error in a very short amount of time

fetch

reactjs