Axios giving Network error in React Native

Question

I am using Expo Client for development and I am not able to send a login API call.

onSubmit fuction

const onSubmit = async (username, password)=>{
    console.log(username);
    console.log(password);
    await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username: username,
            password: password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }        
    ).then(res=>{
        console.log(res.data);
        if (res.data.status==="success"){
            localStorage.setItem('username',res.data.username);
            localStorage.setItem('token',res.data.token);
            navigation.navigate('Settings');
        }else{
            setError(res.data.error);
        }
    }).catch(err=>console.log(err));
}

Error that I was getting

sumit

97127516

Network Error at node_modules\axios\lib\core\createError.js:17:22 in createError at node_modules\axios\lib\adapters\xhr.js:120:6 in handleError at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:609:10 in setReadyState at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:396:6 in __didCompleteResponse at node_modules\react-native\Libraries\vendor\emitter_EventEmitter.js:135:10 in EventEmitter#emit at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

Answer 1

how you doing ?

[EDIT] I've tested your code, there is no sintax error, but i notice that the server doesnt respond the request. whentested with anther baseUrl, it works good. but 'https://backend.unknownchats.com/accounts/login/'.. i got the same error that you, Network error.. and in the insomnia and postman, got a SSL error. So the problem is not your code, but the server.

My advise is to ever test your api requests on Insomnia or Postman, before use it.

So.. the first thing is that you're using the "await" and "then" async method in the same async function.

The best method is using "await".. surrounded by try catch.

Another tip is that, when the object key is the same as the prop passed in valye, you can use only the prop name, i'll set above.

the second point is that, axios has its own a error data handler.. This error you sent, is the default axios error..

So, to see the error data, you can console.log "error.response.data" in catch.

try{
 const {data} =  await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username,
            password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }   
     );
   console.log(data);      
 }catch(e){
   console.log(e.response.data);
 }

Let me know if you could find the response error.

Cheers! :D