Question

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

我的方案是尝试连接一些api，同时在网络断开连接时获取请求本地响应网络请求失败错误。如何处理这种情况，为用户提供最佳的用户体验。

如何以更好的方式处理网络请求失败。

Answer 1

像这样使用NetInfo：

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

Answer 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
      }
    });

Answer 3

您可以尝试通过fetch（）

来处理错误

// Handling Internet Errors


handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
  }


fetch(/*"url"*/)
  .then(this.handleErrors)
  .then(response => console.log("ok") )
  .catch(error => console.log(error) );

Answer 4

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

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

Answer 5

在React中使用软件包，即npm i react-detect-offline import { Offline, Online } from 'react-detect-offline';在您的应用中，并附加值以在“在线”模式下在“在线”下显示，否则显示“网络断开”等离线消息 <Online>Show Online values</Online> <Offline>Network Disconnected</Offline>

Answer 6

这可能是因为 2 个主要因素：

关于网络请求（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; 
  }
}

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

6 个答案: