Axios Promise Handling - Getting "Possible Unhandled Promise Rejection - TypeError: Network request failed" in react-native

Question

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 combination. 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 components 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.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 } } }

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

Answer 1

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?