Question

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

MQCHLTAB

但是当我关闭WiFi获取错误时

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

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

谢谢！

Answer 1

结帐NetInfo：

import { NetInfo } from 'react-native'

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

<强> isConnected

适用于所有平台。异步获取布尔值以确定互联网连接。

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 reducer：

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没有捕获网络离线

1 个答案: