Question

我正在尝试在我的本机代码中使用axios发出发布请求。

我的后端在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)的结果。我在做什么错了？

Answer 1

可以对Javascript Promise进行解析（即已成功检索到所请求的资源），也可以将其拒绝（即无法检索到所请求的资源）。

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

Answer 2

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

Answer 3

第一

检查请求是否通过以下方式传递到服务器：在调用登录功能时记录一条消息。 console.log（“被叫”）如果它是从react本机应用程序调用的（前面）如果没有调用，我认为您必须将服务器端与客户端链接起来

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

Answer 4

我有同样的问题。解决方法如下：

如果您使用智能手机，请确保将计算机和设备连接到同一网络（Wi-fi）。
不要使用localhost，请转到cmd并键入ipconfig，然后从无线LAN适配器Wi-Fi复制IPv4地址，然后进行如下调用： “ axios.post（http://192.168.0.111:3002/api/user/login，{user}）”
您需要打开端口以允许通过Windows防火墙访问（如果您在Windows上工作）
如果您不知道如何在Windows防火墙上打开端口，请单击链接或将其粘贴到Google（https://www.youtube.com/watch?v=xMGPyZtdP00）上，您将看到详细的教程。

我想提出一个建议，将来尝试使用async / await语法（这是我使用的语法）代替.then（），这使您的工作更容易理解。

反应本机Axios未处理的承诺拒绝

4 个答案: