0

我正在尝试在我的 React Native 应用程序中创建一个健壮的模式，以便如果没有 Internet 连接，我不会进行 API 调用，而是显示“连接丢失...”消息。

我创建了以下 util 函数并尝试将其合并到我的 API 调用中，但在得到响应后fetch似乎没有遇到问题。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障碍或建议使它成为一个健壮的模式吗？

4

2 回答 2

2

如果你想拥有then你isConnectedToInternet应该让它返回一个承诺。尝试这样的事情：

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));
    })
};
于 2020-07-22T18:04:07.273 回答
0

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

如果您想在应用程序认为它处于离线状态时对显示 UI 的状态进行建模，您可以使用该NetInfo.addEventListener()函数来实现。我认为也有一个 React 钩子。

于 2020-07-22T18:51:53.923 回答