Axios 没有捕捉到网络离线

Question

挑战是在 POST 请求期间使用 React-Native 中的 AXIOS 库捕获网络离线状态错误。

axios.post(Constants.API.LOGIN, {
  username: email,
  password: password
})
.then(function (response) {
  console.log('SUCCESS!');
  loginUserSuccess(dispatch, user);
})
.catch(function (error) {
  if(!error.response){
    networkError(dispatch);
  } else {
    loginUserFail(dispatch);
  }    
});

但是当我关闭 WiFi 时出现错误

Possible Unhandled Promise Rejection (id:0)

AXIOS处理网络状态的方法是什么？

谢谢！

Answer 1

查看 NetInfo:

import { NetInfo } from 'react-native'

https://facebook.github.io/react-native/docs/netinfo.html

isConnected

Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
    'change',
    handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'change',
  handleFirstConnectivityChange
);

您的处理方式可能有一些额外的问题。我无法确切地看到是什么触发了您的代码中未处理的拒绝，但我可以假设它正在进入 catch 块。

如果是这样，那目前意味着 networkError() 或 loginUserFail() 失败了，这就是实际产生未处理拒绝的原因。

看看这些函数，如果它们是异步的，请确保它们内部有 catch 块。问问自己这个错误到底是从哪里来的，先回答这个问题，然后再查看 NetInfo。否则，未处理的拒绝可能仍然会发生。确保测试代码可能失败的所有不同方式:)

借助 NetInfo，您可以通过该事件侦听器在应用程序架构的根级别附近设置一些东西。这可以让您管理 Redux 之类的设置。如果应用程序检测到离线，您可以将值设置为 false，整个应用程序都会知道它处于离线状态。你可能会做一个中间件。

代码可能类似于：

中间件：

`store.dispatch(changeConnectivityState())`

或者你可以有一个动作创建器（显示为 redux-thunk）：

export function onAppConnectivityChange(newState) {
    return (dispatch) {
        dispatch({
            type: APP_CONNECTIVITY_CHANGE,
            payload: newState
        })
    }
}

Redux 减速器：

case APP_CONNECTIVITY_CHANGE:
    return {
        ...state,
        isConnected: action.payload
    }

在你的组件中：

render() {
    if (this.props.isConnected === true) {
        return <View><Text>We are connected.</Text></View>
    }
}

const mapStateToProps = (state) => {
    const isConnected = state.someReducer.isConnected
    return {
        isConnected
    }
}

export default connect(mapStateToProps, null)(SomeComponent)

希望这能给你一些想法。 Axios 不应该负责检查应用程序是在线还是离线（除了快速检查布尔值）。您的应用程序应该始终知道它是在线还是离线，并且您的组件应该能够检测到状态。您会发现它更具可扩展性并且更易于使用。

如果我看到你从哪里调用 Axios，我可以给你一个更具体的答案。

Axios 没有捕捉到网络离线

Axios not catching Network Offline

react-native

axios