React Native 中的 NetInfo 使用模式

Question

我正在尝试在我的 React Native 应用程序中创建一个健壮的模式，以便如果没有 Internet 连接，我不会进行 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 上有 then，你应该让它返回一个承诺。试试这样的：

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 钩子。