React Native 中的 NetInfo 使用模式

Question

我正在尝试在我的 React Native 应用程序中创建一个稳健的模式，这样如果没有互联网连接，我将不会进行 API 调用，而是显示一条“连接丢失...”消息.

我创建了以下 util 函数并尝试使用 fetch 将其合并到我的 API 调用中，但在收到响应后它似乎没有命中 then 块。

检查连接的函数如下：

import NetInfo from "@react-native-community/netinfo";

export const isConnectedToInternet = () => {

   NetInfo.fetch().then(state => {
      return state.isConnected;
    });
};

下面是我尝试使用它的方式：

import { isConnectedToInternet } from '../my-utils';

export const someApiCall = () => {

   isConnectedToInternet()
      .then(result => {

         if(result) {
          
             return (dispatch) => fetch ('https://myapi/someendpoint', fetchOptionsGet())
                               .then(response => {

                                  // Process data...
                               })
         } else {
    
             Alert.alert('No Internet connection!');
         }
   })
};

知道为什么我没有碰到 then 块或建议使它成为一个稳健的模式吗？

Answer 1

如果您想然后在您的 isConnectedToInternet 上，您应该 return 做出承诺。尝试这样的事情：

import NetInfo from "@react-native-community/netinfo";

export const isConnectedToInternet = () => {
    return new Promise((resolve, reject) => {
        NetInfo.fetch().then(state => {
            resolve(state.isConnected);
        }).catch(e => reject(e));
    })
};

Answer 2

在移动软件中，最佳做法是始终尝试远程 API，然后在没有互联网时处理异常。 iOS 和 Android 提供的可达性 API 并不总是准确的 - 它们需要轮询以确定连接性。因此，应用程序最好始终尝试 fetch，即使它认为互联网可能已关闭，以防设备在上次可达性检查后恢复连接。

如果您想要模拟某些状态，当应用认为它处于离线状态时显示 UI，您可以使用 NetInfo.addEventListener() 函数来实现。我想也有一个 React 钩子。

React Native 中的 NetInfo 使用模式

NetInfo usage pattern in React Native

javascript

react-native

react-native-community-netinfo