React Native Axios 未处理的承诺拒绝
我正在尝试使用 axios 在我的 React Native 代码中发出发布请求。
我的后端在 Node.js 中,我正在使用 Postman 进行测试。在这里,您可以看到我的端点 aip/user/login 使用正文中指定的电子邮件和密码为用户返回令牌和 ID。
我的 React Native 代码如下:
export default function Signin(props) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isPasswordVisible, setIsPasswordVisible] = useState(false)
const login = () => {
// on teste le format de l'email
let isEmailValid = emailRegex.test(email);
if (isEmailValid) {
const user = {
email: email,
password: email
}
axios.post(`http://localhost:3002/api/user/login`, { user })
.then(response => {
console.log(response)
console.log(response.data)
})
.catch(error => console.log(error))
else {
alert("Email invalid")
}
}
return (
<View style={styles.container}>
<TextInput
label="Email"
value={email}
onChangeText={email => setEmail(email)}
/>
<View style={styles.password}>
<TextInput
label="Password"
value={password}
onChangeText={password => setPassword(password)}
/>
</View>
<Button mode="contained" onPress={login} style={styles.signin}> Signin</Button>
</View>
)
}
这是我收到的错误。我甚至看不到
console.log(response)
和
console.log(response.data)
结果。我做错了什么?
Javascript 承诺既可以被解决(即成功检索到请求的资源),也可以被拒绝(即无法检索到请求的资源)。
只有承诺被
解决
时,
then()
函数才会执行。从本质上讲,如果 axios 收到带有错误代码的响应(除 2XX 之外的任何代码),则承诺将被拒绝。Axios
在承诺被拒绝的情况下,您需要使用
catch()
回调。如果您想打印错误,它看起来应该类似于以下内容:
axios.post(`http://localhost:3002/api/user/login`, { user })
.then(response => {
console.log(response)
console.log(response.data)
})
.catch(error => console.log(error))
本质上,
.then()
未被执行,因为请求不成功,并且返回了 200/201/2XX 以外的响应。
在您的情况下,问题是您正在传递
{user},其中 user 是一个对象,因此您正在嵌套该对象。删除用户周围的花括号。
axios.post(`http://localhost:3002/api/user/login`, user)
您可以在此处阅读有关 javascript 承诺、
.then()
、
.catch()
和
.finally()
的更多信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
对我来说,解决方案是不使用 localhost:port 作为 API 地址,而是实际使用服务器的 IP 地址。
示例:
axios.post(`http://10.0.0.2:3002/api/user/login`, { user })
.then(response => {
console.log(response)
console.log(response.data)
})
也请看这里: https://github.com/facebook/react-native/issues/10404
- 首先
通过以下方式检查请求是否已传递到服务器:在调用登录函数时记录一条消息。console.log("called") 如果它是从 React Native 应用程序(前端)调用的 如果没有调用,我认为您必须将服务器端与客户端链接起来
错误“网络错误”指的是该问题