web-dev-qa-db-ja.com

Axios Promise処理-反応ネイティブで「未処理のPromise拒否の可能性-TypeError：ネットワーク要求が失敗しました」を取得

ログイン画面の_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":"[email protected]","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":"[email protected]","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":"[email protected]","password":"dddddd"}',
          _bodyText: '{"email":"[email protected]","password":"dddddd"}',
          bodyUsed: true } } }
_

Androidエミュレータ（Samsung Galaxy S7をエミュレート））での表示のスクリーンショットは次のとおりです。

Yellow error bar showing "Possible Unhandled Promise Rejection..."

javascriptandroidreact-nativepromiseaxios
9
Zach Cook

このスニペットに問題はありません。

  • リクエストを送信します。
  • 401-不正な応答が返されます。
  • Catchはエラーを受け取り、ログに記録します。

興味深い部分は、未処理の約束拒否エラーが発生する理由です。しかし、これは別の場所でスローされます。したがって、より多くのコードを提供する必要があります。

編集：おそらく、あなたはあなたのaxiosの約束を呼び出し関数に返す必要があるだけでしょうか？

3
Thomas

同じ問題があり、データベースにFirebaseを使用しています

私はこの問題を解決します put database on realtime instead of cloud Firestore like the picture

画像のようにクラウドFirestoreの代わりにリアルタイムでデータベースを配置します

これがうまくいったことを願っています

0
ehsan