如何在不使用 setInterval 的情况下获取 Api？

Question

useEffect(() => {
    let clearData;
   
    
    clearData = setInterval(() => {
      axios.get(`getPlayersStats`,
        {
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-control-allow-origin': '*'
          },
          auth: {
            username: 'admin',
            password: 'password'
          },

        }).then(response => {
          // console.log("aa",response.data);
          setData(Object.values(response.data).flat());
        }).catch(error => {
          console.log(error);
        });
    }, 20);
    return () => {
      clearInterval(clearData);
    }
  }, [])

api 的这一部分正在获取运行时间（数据）但是当我删除 setinterval 时它不起作用（更新从服务器获取的时间）使用 setInterval 在控制台多次运行 url 有 XHR 连续运行还有更多比 2 api 运行设置的间隔需要更多的网站加载时间。
那么如何在不使用 setInterval 每秒更新值的情况下获取数据呢？ 希望它的需求比数据更新

Answer 1

改为使用 settimeout 并且 cleardata 必须在 useeffect 之外，use effect 可能会运行多次。

const clearData = useRef();
useEffect(() => {
  const fetch = () {
    axios.get(`getPlayersStats`, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-control-allow-origin': '*'
      },
      auth: {
        username: 'admin',
        password: 'password'
      },

    }).then(response => {
      // console.log("aa",response.data);
      setData(Object.values(response.data).flat());
      clearData.current = setTimeout(fetch, 60);
    }).catch(error => {
      console.log(error);
    });
  
  }
  fetch();
  return () => {
    clearInterval(clearData.current);
  }
}, [])