React Native Axios unhandled promise rejection

Question

I am trying to make a post request using axios in my react native code.

My backend is in Node.js and I am using Postman to test it out. Here, you can see that my endpoint aip/user/login sends back a token and id for the user with the email and password specified in the body.

My React Native code is the following :

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>
    )
}

And this is the error I get. I don't even see the console.log(response) and the console.log(response.data) results. What am I doing wrong?

The promise that Axios returns has been rejected. So your error will be in a catch() handler on the promise. The error indicates that you've not created any rejection handling. — Emiel Zuurbier
Edited my code with what I tried. I added catch() block but still same problem — colla

MarcElrick MarcElrick · Accepted Answer · 2020-09-09T13:18:04

Javascript promises can either be resolved (i.e. the requested resource was successfully retrieved) and rejected(i.e. the requested resource could not be retrieved).

The then() function only executes if the promise is resolved. Under the hood, if axios receives a response with an error code(Anything other than 2XX), then the promise will be rejected. Axios

In the case that a promise is rejected, you need to use the catch() callback. If you want to print the error, it should look something like the following:

axios.post(`http://localhost:3002/api/user/login`, { user })
                .then(response => {
                    console.log(response)
                    console.log(response.data)
                })
                .catch(error => console.log(error))

Essentially, .then() is not being executed because the request was unsuccessful, and a response other than 200/201/2XX was returned.

In your case, the issue is that you are passing {user}, where user is an object, so you are nesting the object. Remove the curly braces around user.

axios.post(`http://localhost:3002/api/user/login`, user)

You can read more about javascript promises, .then(), .catch() and .finally() here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

React Native Axios unhandled promise rejection

4 Answers