在 React.js 中檢查互聯網連接的可重用鈎子

Question

對於我的示例應用程序，我試圖檢查是否存在互聯網連接，我為此使用了一個可重用的鈎子，如下所示：

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）發送一個 get 請求，這樣我就可以知道狀態並將我的 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); } })(); }, []); };