如何在 React 中检查用户是否有互联网连接

Question

我需要根据 React 应用程序中的互联网连接来确定将调用哪个函数，例如：

if (connected) {
   call function Y()
} else if (!connected) {
   call function X()
}

我该怎么做？我已经用 NetInfo 和 navigator.online 试过了，但我无法让它工作。

Answer 1

来自 navigator.onLine 上的 MDN 文档：

如果浏览器不支持 navigator.onLine它总是会显示为false/undefined。

To see changes in the network state, use addEventListener to listen for the events on window.online and window.offline, as in the following example:
window.addEventListener('offline', function(e) {
console.log('offline'); });

window.addEventListener('online', function(e) { console.log('online');
});

Answer 2

浏览器以不同的方式实现 navigator.online 属性。

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则它处于离线状态；所有其他条件 return 为真。

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送错误值。在 Firefox 41 之前，所有其他条件 return 为真值；在 Windows 上测试 Nightly 68 上的实际行为表明它只寻找 LAN 连接，例如 Chrome 和 Safari 给出误报。

我建议收听在线活动，如果你得到 True，那么请确保向任何 public 域（如 google 或你自己的 [=10] 发出 ajax 请求=]

[基于][1] [1]: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

如何在 React 中检查用户是否有互联网连接

How to check if the user has internet connection in React

javascript

reactjs

web

cross-browser