对于我的示例应用程序,我试图检查是否存在互联网连接,为此我使用了可重用的钩子,如下所示
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/