[英]Axios Promise Handling - Getting “Possible Unhandled Promise Rejection - TypeError: Network request failed” in react-native
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.在登录屏幕上的
react-native
应用程序中,我正在努力在输入错误的用户名/密码组合后为用户提供很好的错误消息。 To interact with the API I'm using the library Axios .为了与 API 交互,我使用了库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.但是,当我在
catch
语句中遇到错误时,我会收到一条丑陋的错误消息,说我有一个“未处理的承诺拒绝”,并且我无法执行诸如设置组件状态或导航到新页面之类的操作。
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?谁能看到我在这里做错了什么?
PS 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);
PS这是我从服务器返回的错误消息,该消息是从该
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):这是在 Android 模拟器(模拟三星 Galaxy S7)上的屏幕截图:
There is nothing wrong in this snippet.这个片段没有任何问题。
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?编辑:也许您只需要将 axios 承诺返回给调用函数?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.