How to wait for an active internet connection before making an HTTP request in reactjs?

Question

I am trying to make my Reactjs web application more robust.

I am passing an HTTP request and waiting for the response. and the users of my application are having difficulties with the application because of poor internet connection that keeps disconnecting which results in the application crashing as the HTTP request fails to go through or it fails to return the response.

I am trying to find a solution.

=> I want the application to wait for the internet connection before passing the HTTP request.

I have understood how to detect internet connection using navigator.onLine; but I don't know how to wait till navigator.onLine is true so that I can execute HTTP request.


  await axios.post(`https://process.doc.com/v1/tea?key="API_KEY",  doc ).then(res=>{console.log(res)})

I want to wait for the internet connection to execute the https request but I can't find a solution.

Expected Result: wait till active internet connection is back so that https request can be made. Actual Result: internet connection is inactive which leads to the application crashing as https request is not made properly

Possible duplicate of [How to detect online/offline event cross-browser?](https://stackoverflow.com/questions/3181080/how-to-detect-online-offline-event-cross-browser) — ponury-kostek, Jul 23 '19 at 16:35
@ponury-kostek the question you linked asks how to detect offline/online event.It is not about how to wait for the change to happen — Manos Kounelakis, Jul 23 '19 at 16:37
The way you wait for something in javascript is with event listeners and callbacks. — Håken Lid, Jul 23 '19 at 16:41
Wait for "the internet"? What you really want to do is just keep retrying until you succeed (perhaps with an appropriate back-off). You don't need the whole internet. You just need to connect to your specific URL. Testing "the internet" is pointless, and still doesn't fix the problem if your actual URL stops responding correctly. — spender, Jul 23 '19 at 16:43

score 3 · Answer 1 · answered Jul 23 '19 at 16:43

3

Using react hooks you could do the following:

React.useEffect(() => {
  window.addEventListener('online', onLineCallBack);
  return () => window.removeEventListener("online", onLineCallBack);
}, []);

answered Jul 23 '19 at 16:43

Paul Fitzgerald

11,770
4
42
54

1

Hooks are great for this. You could also take a look at [@rehooks/online-status](https://github.com/rehooks/online-status/blob/master/src/index.js) – Håken Lid Jul 23 '19 at 16:49

score 2 · Answer 2 · answered Jul 23 '19 at 16:40

2

You have to add the following.

componentDidMount = () => {
  window.addEventListener('online',  onLineCallBack);
};

componentWillUnmount = () => {
  window.removeEventListener("online", onLineCallBack);
};

answered Jul 23 '19 at 16:40

Xavier Cleetus

41
2

Joseph · Answer 3 · 2019-07-23T16:55:51.227

you can use the navigator api, get the offline/online status

eg:

function yourComponent() {
   const [ status, setStatus ] = useState(navigator.onLine);

   const handleOnLine = () => {
     // handle online
   }

  const handleOffLine = () => {
    // handle offline
  }

   useEffect(() => {
    window.addEventListener('online', handleOnLine);
    window.addEventListener('offline', handleOffLine);

    return () => {
        window.removeEventListener('online', handleOnLine);
        window.removeEventListener('offline', handleOffLine);
    }
  }, []);


  return (
    // your jsx
  )
}

How to wait for an active internet connection before making an HTTP request in reactjs?

3 Answers3