Question

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

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时， isOnline 仍然返回真，我也在safari的控制台中进行了尝试，作为window.navigator.isOnline，它返回我为true，

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

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

我该如何实现这一目标，或者有什么更好的方法。

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

感谢您的帮助

Answer 1

您可以执行以下操作，并具有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);
            }
        })();
    }, []);
};

用于在React JS中检查Internet连接的可重用钩子

1 个答案: