React Native can't get response from localhost - react-native

Question

i'm studying with React Native,
but i can't get response properly
my fetch code is :
try {
let response = fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
console.log(response);
the response is :
the api response which i get from api when i try postman:
my php api is :
but my debugger console response is

Answer 1

fetch() function return a promise, so you should resolve this promise using one of this 2 methods:
1/ Using .then()
fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
).then(response => {
console.log(response); //<- your response here
}).catch(error => {
console.log(error); //<-catch error
});
2/ Using async/await syntax: you should add async keyword on the function where you call fetch
async getResponse(){
try {
let response = fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
console.log(response); //<- your response here
} catch(e){
console.log(e);<-catch error
}
}

Answer 2

You can send it using formdata:
let formData = new FormData();
formData.append('firstname', 'test');
If you do this, you don't have to use JSON.stringify:
fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: data
}
...

Answer 3

fetch is an asynchronous method, meaning it needs a .then callback. The data that immediatley comes from this then has a json() method attached to it to retrieve the actual data in a readable format.
fetch("http://192.168.1.106/little_api/index.php", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(response => response.json())
.then(data => {
console.log(data) // this should return your data
})
.catch(err => console.log(err))
As Mahdi N said in his response, you can use the async/await syntax to retrieve the data without needing the nested callbacks.