在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上工作，但是当我在safari上登记时，我试着打开wifiisOnline我在safari的控制台上也尝试过，作为window . navigator . I online它返回了我的真实，
所以通读不同的问题，一个，这里达尼洛建议发送一个httpRequest并检查它。
所以我应该向google.com这样的网站发送get请求，这样我就可以知道状态，并设置我的在线价值为真。因为我认为我需要轮询这个，因为当dom改变时，上面的钩子会很小心，但是
我怎样才能做到这一点，或者还有更好的方法。
我如何在上面的可重用钩子中实现这个。
感谢任何帮助
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
在您的React应用中，您可以通过向外部服务器发送HTTP请求来检查互联网连接。这可以作为一个额外的可靠性层，以确保即使在某些浏览器中navigator.onLine API行为不一致时也能准确判断网络状态。以下是如何修改您的useNetwork自定义钩子以包含此功能的一个示例：
import { useState, useEffect } from 'react';
function useNetwork() {
const [isOnline, setNetwork] = useState(window.navigator.onLine);
// 使用fetch或XMLHttpRequest发送一个简单的HTTP请求来检测网络连接
const checkInternetConnection = async () => {
try {
const response = await fetch("https://www.google.com", { method: "HEAD", timeout: 5000 });
if (response.ok) {
setNetwork(true);
} else {
setNetwork(false);
}
} catch (error) {
setNetwork(false);
}
};
// 初始化网络状态，并设置监听器
useEffect(() => {
// 初始检查
checkInternetConnection();
const updateNetwork = () => {
setNetwork(window.navigator.onLine);
// 网络状态改变时也尝试重新检查连接
checkInternetConnection();
};
window.addEventListener("offline", updateNetwork);
window.addEventListener("online", updateNetwork);
return () => {
window.removeEventListener("offline", updateNetwork);
window.removeEventListener("online", updateNetwork);
};
}, []); // 注意这里的依赖数组是空的，因为我们只希望这个effect在组件挂载和卸载时运行
return isOnline;
}
export default useNetwork;
在这个版本的useNetwork钩子中，我们添加了一个异步函数checkInternetConnection，它尝试向Google发起一个HEAD请求（无须下载整个页面内容）。如果请求成功，则认为用户在线；如果请求失败（超时或网络错误），则认为用户离线。请注意，这里使用了5秒的超时时间，您可以根据需要调整。
此外，每当网络状态通过online或offline事件改变时，都会触发一次额外的连接检查，以确保状态的准确性。这种方法虽然增加了额外的网络请求，但提高了检测结果的可靠性，尤其是在那些依赖于特定浏览器API实现的场景下。
