Javascript 如何连续向API发出GET请求?

Javascript 如何连续向API发出GET请求?,javascript,reactjs,Javascript,Reactjs,我正在向我的数据库发出GET请求,数据正在进入并显示,但当数据在我的数据库上更新时,它不会在使用该数据的组件上更新 编辑 根据评论,我需要不断提出GET请求,因此我更新了问题 使用effect()将数据设置为状态 // Data for each of the tags const [tag1, setTag1] = useState(); const [tag2, setTag2] = useState(); const [tag3, setTag3] = useState(); useEf

我正在向我的数据库发出GET请求,数据正在进入并显示,但当数据在我的数据库上更新时,它不会在使用该数据的组件上更新

编辑 根据评论,我需要不断提出GET请求,因此我更新了问题

使用effect()将数据设置为状态

// Data for each of the tags
const [tag1, setTag1] = useState();
const [tag2, setTag2] = useState();
const [tag3, setTag3] = useState();

useEffect(() => {
    axios
        .get(URL)
        .then(res => {
            const data = res.data;
            // Passing in the setter method
            setTagDetails(data, setTag1, setTag2, setTag3);
        })
        .catch(error => {
            console.log(error);
        });
}, []);

setTagDetails(),其中传入的数据被分割成不同的状态,以在组件中使用:


// Splitting the data by each corresponding tag and adding them to their respective state
export const setTagDetails = (data, setTag1, setTag2, setTag3) => {
    const arr1 = [];
    const arr2 = [];
    const arr3 = [];
    try {
        data &&
            data.forEach(d => {
                // Entries into the database which do not have any tag information
                // have a size of 5 and those with all the details have a size of 6
                const sizeOfObject = Object.keys(d).length;
                // Only need database items with all the details
                if (sizeOfObject > 5) {
                    // Split the data for the tags into their respective name
                    const name = d["tags"]["L"][0]["M"]["name"]["S"];
                    // Will be used to set individual datasets for each tag
                    if (name === "Tag1") {
                        cleanTag(d, arr1);
                    }
                    if (name === "Tag2") {
                        cleanTag(d, arr2);
                    }
                    if (name === "Tag3") {
                        cleanTag(d, arr3);
                    }
                }
            });
        setTag1(arr1);
        setTag2(arr2);
        setTag3(arr3);
    } catch (err) {
        console.log(err);
    }
};

这是预期的行为。要更新数据,您需要向数据库发送另一个GET请求


您可以指示用户刷新页面以获取新数据,或者定期执行get请求以自动更新数据。

如果您希望每x时间执行一个函数,我们将使用。它将每隔x毫秒调用传入函数(作为第一个参数)(其中x是第二个参数,在下面的例子中为1000毫秒或1秒)


请注意,在移动网络速度较慢或ISP带宽有限的情况下,最好注意用户的互联网连接。还有一种危险,就是运行请求的距离太近,以至于我们引入了竞争条件。最后,您必须清除间隔,否则会严重影响应用程序的性能。

这是restful服务的行为,为了捕获后端的最新事务,它需要发送每个请求的HTTP请求来获得更新的响应。我明白了,所以我必须在每1-2秒更新一个GET请求来更新数据。您可以考虑使用SSE(服务器发送事件)通知服务器更新服务器上的客户端。我的数据来自传感器,所以每当新数据发送到数据库时,我需要更新数据。是的,有很多选项,服务器发送的事件,websockets长轮询以实时加载新内容如果我将项目从
setTag
传递给子组件,我是否也需要在那里清理它们,还是只在useffect()中清理它们?我不确定是否理解您的问题。。。清理间隔?对不起是的我是说清理间隔。我是否只需要在useffect()中执行此操作?是的,因为时间间隔的作用域是useffect挂钩。我不建议使用这种方法,这将淹没api服务器。当您扩展应用程序中的用户数时,您会注意到这一点。
useEffect(() => {
const interval = setInterval(() => {
   axios
    .get(URL)
    .then(res => {
        const data = res.data;
        // Passing in the setter method
        setTagDetails(data, setTag1, setTag2, setTag3);
    })
    .catch(error => {
        console.log(error);
    });
  }, 1000);
  return () => clearInterval(interval);
}, []);