对于我的示例应用程序,我试图检查是否存在互联网连接,为此我使用了可重用的钩子,如下所示

function useNetwork() {
    const [isOnline, setNetwork] = useState(window.navigator.onLine);
    const updateNetwork = () => {
        setNetwork(window.navigator.onLine);
    };
    useEffect(() => {
        window.addEventListener("offline", updateNetwork);
        window.addEventListener("online", updateNetwork);
        return () => {
            window.removeEventListener("offline", updateNetwork);
            window.removeEventListener("online", updateNetwork);
        };
    });
    return isOnline;
}


但是问题是它在chrome中工作,但是当我尝试打开wifi仍在safari中签入时,is isOnline返回我为真,我也在safari的控制台中尝试过,
作为window.navigator.isOnline,它返回我为true,

因此,请仔细阅读one的不同问题,此处Danilo建议发送httpRequest并进行检查。

所以我应该将get请求发送到google.com之类的任何网站,这样我才能知道状态并将onLine值设置为true。因为我认为我需要对此进行轮询,因为更改dom时,上面的钩子很小心,但是

我怎样才能做到这一点,或者有什么更好的办法。

我如何在上面的可重用挂钩中实现这一点。

任何帮助表示赞赏

最佳答案

您可以执行类似的操作,并拥有一个api端点/或调用任何可靠的api



const useNetworkStatus = () => {
    const [isOnline, setStatus] = useState();
    useEffect(() => {
        (async () => {
            try {
                window.networkPoll = setInterval(async () => {
                    const networkStatus = await fetch(/*your api*/);
                    if (networkStatus.code != 200) {
                        setStatus(false);
                    }
                    if (networkStatus.code == 200) {
                        setStatus(true);
                    }

                }, 5000);
            }
            catch (error) {
                setStatus(false);
            }
        })();
    }, []);
};

关于javascript - 用于在React JS中检查Internet连接的可重用钩子(Hook),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59243172/

10-11 13:07
查看更多