时间戳

首页 > 解决方案 > 在 React.js 中检查互联网连接的可重用钩子

javascript - 在 React.js 中检查互联网连接的可重用钩子

问题描述

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

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 仍然返回true，我也在 safari 的控制台中尝试过，因为 window.navigator.isOnline 它返回 true。

阅读不同的问题，这里Danilo建议发送一个 httpRequest 并检查它。

所以我应该向 google.com 之类的任何网站发送获取请求，以便我可以知道状态并将我的 onLine 值设置为 true。因为我认为我需要轮询这个，因为上面的钩子在 dom 改变时会小心。

我怎样才能做到这一点，或者有没有更好的方法？如何在上面的可重用钩子中实现这一点。

标签： javascriptreactjs

解决方案

你可以做这样的事情，并有一个 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);
            }
        })();
    }, []);
};

推荐阅读