网络关闭时如何处理 React-Native 中的网络故障答案

【问题标题】：How to handle network failure in React-Native, when network is off网络关闭时如何处理 React-Native 中的网络故障
【发布时间】：2016-04-28 23:14:12
【问题描述】：

当设备未连接到网络时，如何在 React-Native 中处理网络故障。

我的场景是尝试连接一些 api，同时在网络断开时获取请求 react-native 会抛出 network request failed 错误。如何处理这种情况，为用户提供最佳的用户体验。

如何更好地处理网络请求失败。

【问题讨论】：

自此之后你有没有找到解决办法？

标签： facebook reactjs facebook-javascript-sdk react-native reactive-programming

【解决方案1】：

像这样使用NetInfo：

// Check for network connectivity
NetInfo.isConnected.fetch().done((isConnected) => {
    if ( isConnected )
    {
        // Run your API call
    }
    else
    {
        // Ideally load from local storage
    }
});

【讨论】：

NetInfo 自 2016 年以来未修复。
@LingboTang 自 2016 年以来，世界变得越来越令人沮丧。NetInfo 只是想保护你
@ComethTheNerd isConnected 在 iOS 上将始终返回 false 并且尚未修复：github.com/facebook/react-native/issues/8615
嘿，我想在网络断开时显示消息。我不想在每个 api 中都调用它。

【解决方案2】：

使用catch块处理异常，从catch块中你可以执行处理异常的动作，可能是重定向或者状态改变来显示错误

const url = `your url to be fetched`;
        fetch(url, {
          method: "GET",
          headers: header
        })
          .then(res => res.json())
          .then(json => {
            console.log(json);
             this.setState({
                data:json
              });  
    })
    .catch(error => {
      if (error) {
        //perform the redirection to the network request slow page or set state to show error
      }
    });

【讨论】：

【解决方案3】：

这可能是因为两个主要的原因：

关于网络请求的错误定义（AndroidManifest.xml 或 info.plist）
流式传输响应或互联网连接速度非常慢或其他相同原因时中断...

在catch里面处理这个案子：

try {
  const response = fetch(request)
} catch (e) {
  if (error.message === 'Network request failed') {
    // retry or any other handling like showing alert 
  } else {
    throw e; 
  }
}

【讨论】：

【解决方案4】：

在 React 中使用包，即npm i react-detect-offline import { Offline, Online } from 'react-detect-offline'; 在您的应用程序中，并附上在线模式下在线模式下显示的值，否则离线消息，如网络断开连接 <Online>Show Online values</Online><Offline>Network Disconnected</Offline>

【讨论】：

【解决方案5】：

红屏仅在调试模式下显示。要在没有 Internet 连接的情况下处理错误，可以使用 try...catch 块

     try {
        let response = await fetch(url, params);
    } catch (error) {
        
        console.error(error);
    }

【讨论】：

句柄不够好，你捕捉到所有错误而不仅仅是network request failed