Axiosがネットワークオフラインをキャッチしない

Question

AXIOSライブラリを使用してPOST要求中にネットワークのオフラインステータスエラーをReact-Nativeで捕捉することが課題です。

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

が、私はエラー

Possible Unhandled Promise Rejection (id:0) 

を取得して無線LANをオフにしたときにAXIOSでネットワークの状態を処理するための方法は何ですか？

ありがとうございます！

Answer 1

NetInfoをチェックアウト：

import { NetInfo } from 'react-native' 

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

は、すべてのプラットフォームで利用可能

を接続されています。ブール値を非同期的に取得してインターネット接続を判断します。

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()のいずれかが失敗していることが実際には未処理拒否を生成していることを意味します。

これらの関数を見て、それらの関数が非同期の場合は、内部にキャッチブロックがあることを確認してください。そのエラーがどこから来たのか自分に尋ね、それに最初に答えてからNetInfoを見てください。そうしないと、未処理の拒否が引き続き発生する可能性があります。コードが失敗する可能性のあるさまざまな方法をすべてテストすることを確認してください:)

NetInfoを使用すると、そのイベントリスナーを経由してアプリケーションアーキテクチャのルートレベルの近くに何かを設定できます。これにより、Reduxのような設定で管理することができます。アプリがオフラインで検出された場合は、値をfalseに設定して、アプリ全体がオフラインであることを知ることができます。あなたはおそらくミドルウェアを作ることができます。

のように見えるかもしれませんコード：

ミドルウェア：

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

Reduxのリデューサ：

あなたは（ redux-thunkで示す）アクションの作成者を持つことができ

`store.dispatch(changeConnectivityState())` 

か

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をどこから呼び出すのか分かっていれば、より具体的な答えを与えることができます。