javascript - Axios Promise Handling - Getting "Possible Unhandled Promise Rejection - TypeError: Network request failed

admin管理员组

文章数量:1312656

In my react-native application on the login screen I'm working on providing the user with nice error messaging after entering in the incorrect username / password bination. To interact with the API I'm using the library Axios. However when I get an error in the catch statement, I get this ugly error message saying that I have an "unhandled promise rejection" and I cannot do things such as set the ponents state or navigate to a new page.

I can't see what I'm doing wrong, it looks exactly like examples I've seen in the docs.

In my form submission function I have:

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

Can anyone see what I'm doing wrong here?

P.S. Here is the error message I'm getting back from the server, which get's logged from that 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>' ],
          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 } } }

Here is a screenshot of what it looks like on the Android emulator (emulating a Samsung Galaxy S7):

In my react-native application on the login screen I'm working on providing the user with nice error messaging after entering in the incorrect username / password bination. To interact with the API I'm using the library Axios. However when I get an error in the catch statement, I get this ugly error message saying that I have an "unhandled promise rejection" and I cannot do things such as set the ponents state or navigate to a new page.

I can't see what I'm doing wrong, it looks exactly like examples I've seen in the docs.

In my form submission function I have:

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

Can anyone see what I'm doing wrong here?

P.S. Here is the error message I'm getting back from the server, which get's logged from that 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>' ],
          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 } } }

Here is a screenshot of what it looks like on the Android emulator (emulating a Samsung Galaxy S7):

• javascript
• android
• react-native
• promise
• axios

Share Improve this question Follow edited Sep 4, 2017 at 4:16 Zach Cook asked Aug 31, 2017 at 23:20 Zach CookZach Cook 6141212 silver badges3333 bronze badges 14

• it could simply be that err or err.response is undefined, therefore trying to log err.response.data would thrown an error, therefore, though you are using .catch - because it throws an error, you have an unhandled rejection on your hands – Jaromanda X Commented Sep 1, 2017 at 6:50
• I have logged err.response.data - I even included it in the SO question. It returns the error properly from the server. @JaromandaX – Zach Cook Commented Sep 1, 2017 at 18:28
• in the code you clearly state Run into big problems when I get an error - you never say what console.log('...', err.response.data) outputs - you show the error message you get from the server, but that can't be err.response.data - that looks like it's more than just err.response.data – Jaromanda X Commented Sep 1, 2017 at 22:51
• 1 can you expand the yellow warnings and include it in your question? – Ganesh Cauda Commented Sep 4, 2017 at 3:37
• 1 What is calling this? Is it a React class? Have you tried returning the err from catch? Usually when you see a problem like this there is an upstream function that is expecting to receive something from the promise. – Mark Commented Sep 7, 2017 at 1:53

 |  Show 9 more ments

1 Answer 1

Sorted by: Reset to default 5 +75

There is nothing wrong in this snippet.

• You send a request.
• You get a 401 - unauthorized response.
• Catch receives the error and logs it.

The interesting part is why you get that unhandled promise rejection error. But this is thrown somewhere else. So you need to provide more of the code.

Edit: Perhaps you just have to return your axios promise to the calling function?

本文标签：