开发者问题收集

React Native Axios 未处理的承诺拒绝

2020-09-09
3645

我正在尝试使用 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) 结果。我做错了什么?

![在此处输入图片描述

3个回答

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

MarcElrick
2020-09-09

对我来说,解决方案是不使用 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

Rafanoli
2020-09-09
  • 首先

通过以下方式检查请求是否已传递到服务器:在调用登录函数时记录一条消息。console.log("called") 如果它是从 React Native 应用程序(前端)调用的 如果没有调用,我认为您必须将服务器端与客户端链接起来


错误“网络错误”指的是该问题

Hamza AZIZ
2020-09-11