javascript - 如何在 reactjs 中发出 HTTP 请求之前等待活动的 Internet 连接？

Question

我正在尝试使我的 Reactjs Web 应用程序更加健壮。

我正在传递一个 HTTP 请求并等待响应。并且我的应用程序的用户在使用应用程序时遇到了困难，因为互联网连接不佳，不断断开连接，导致应用程序崩溃，因为 HTTP 请求无法通过或无法返回响应。

我正在努力寻找解决方案。

=> 我希望应用程序在传递 HTTP 请求之前等待互联网连接。

我已经了解如何使用navigator.onLine 检测互联网连接；但我不知道如何等到 navigator.onLine 为 true 才能执行 HTTP 请求。

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

我想等待互联网连接来执行 https 请求，但我找不到解决方案。

预期结果：等待活动的互联网连接恢复，以便可以发出 https 请求。实际结果：互联网连接不活跃，导致应用程序崩溃，因为 https 请求未正确发出

标签： javascriptreactjs

Answer 1

使用反应钩子，您可以执行以下操作：

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