Axios Promise Handling - 反応したネイティブの「処理できないプロミス拒否 - タイプエラー：ネットワークリクエストが失敗しました」

Question

私のreact-nativeログイン画面のアプリケーションで、間違ったユーザー名を入力した後に素晴らしいエラーメッセージをユーザーに提供しています/パスワードの組み合わせ。 APIとやり取りするにはライブラリAxiosを使用しています。しかし、私はcatchステートメントでエラーが発生したとき、私は "未処理の約束拒否"を持っていると言う醜いエラーメッセージが表示され、コンポーネントの状態を設定したり、新しいページに移動するなどのことはできません。

私が間違っていることを見ることができません。ドキュメントで見た例とまったく同じです。

私が持っている私のフォーム送信機能では：

axios.post('http://192.168.1.11:1337/login', { 
    email: this.state.username, 
    password: this.state.password 
}).then(function (response) { 

    // This stuff all seems to work great 
    console.log("The response we got: ", response); 
    if (response.status == 200) { 
    console.log("Status code equals 200"); 
    Actions.homepage(); 
    } 
}).catch(function (err) { 

    // Run into big problems when I get an error 
    console.log("Got an error logging in, here's the message: ", err); 
}); 

誰もが私がここで間違ってやっているかを見ることができますか？

P.S.ここはのは、そのconsole.log("Got an error logging in, here's the message: ", err);からログインします、私は戻って、サーバから取得していますエラーメッセージ、次のとおりです。ここで

"Got an error logging in, here's the message:" 

{ [Error: Request failed with status code 401] 
    config: 
    { transformRequest: { '0': [Function: transformRequest] }, 
    transformResponse: { '0': [Function: transformResponse] }, 
    headers: 
     { Accept: 'application/json, text/plain, */*', 
     'Content-Type': 'application/json;charset=utf-8' }, 
    timeout: 0, 
    xsrfCookieName: 'XSRF-TOKEN', 
    xsrfHeaderName: 'X-XSRF-TOKEN', 
    maxContentLength: -1, 
    validateStatus: [Function: validateStatus], 
    method: 'post', 
    url: 'http://192.168.1.11:1337/login', 
    data: '{"email":"zach@homies.io","password":"dddddd"}' }, 
    response: 
    { data: { message: 'Invalid password', user: false }, 
    status: 401, 
    statusText: undefined, 
    headers: 
    { map: 
     { connection: [ 'keep-alive' ], 
      date: [ 'Thu, 31 Aug 2017 23:30:21 GMT' ], 
      'x-powered-by': [ 'Sails <sailsjs.org>' ], 
      vary: [ 'X-HTTP-Method-Override' ], 
      'content-length': [ '52' ], 
      'access-control-allow-credentials': [ '' ], 
      'access-control-allow-origin': [ '' ], 
      etag: [ 'W/"34-Ymi4isRxuJ6jE1EIS+AQag"' ], 
      'access-control-allow-methods': [ '' ], 
      'access-control-allow-headers': [ '' ], 
      'access-control-expose-headers': [ '' ], 
      'content-type': [ 'application/json; charset=utf-8' ] } }, 
    config: 
     { transformRequest: { '0': [Function: transformRequest] }, 
     transformResponse: { '0': [Function: transformResponse] }, 
     headers: 
     { Accept: 'application/json, text/plain, */*', 
      'Content-Type': 'application/json;charset=utf-8' }, 
     timeout: 0, 
     xsrfCookieName: 'XSRF-TOKEN', 
     xsrfHeaderName: 'X-XSRF-TOKEN', 
     maxContentLength: -1, 
     validateStatus: [Function: validateStatus], 
      method: 'post', 
      url: 'http://192.168.1.11:1337/login', 
      data: '{"email":"zach@homies.io","password":"dddddd"}' }, 
     request: 
     { url: 'http://192.168.1.11:1337/login', 
      credentials: 'omit', 
      headers: 
      { map: 
       { accept: [ 'application/json, text/plain, */*' ], 
       'content-type': [ 'application/json;charset=utf-8' ] } }, 
      method: 'POST', 
      mode: null, 
      referrer: null, 
      _bodyInit: '{"email":"zach@homies.io","password":"dddddd"}', 
      _bodyText: '{"email":"zach@homies.io","password":"dddddd"}', 
      bodyUsed: true } } } 

は、それがAndroidのエミュレータ（サムスンギャラクシーS7をエミュレート）にどのように見えるかのスクリーンショットです：

Answer 1

このスニペットでは何も悪いことはありません。

• あなたはリクエストを送信します。
• あなたは401 - 許可されていない応答を得ます。
• キャッチはエラーを受け取り、ログに記録します。

興味深いのは、その未処理の約束拒否エラーが発生する理由です。 しかし、これは他のどこかで投げられます。したがって、コードの多くを提供する必要があります。

編集： おそらく、あなたのAxiosの約束を呼び出し関数に返す必要がありますか？