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":"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 } } }Here is a screenshot of what it looks like on the Android emulator (emulating a Samsung Galaxy S7):
