fetch API always returns {"_U": 0, "_V": 0, "_W": null, "_X": null}

Question

The below code always return the below wired object

{"_U": 0, "_V": 0, "_W": null, "_X": null}

as response.

Here is my code

    getData = () => {
        fetch('http://192.168.64.1:3000/getAll',{
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then((response) => {
            console.log('Response:')
            console.log(response.json())
            console.info('=================================')
        })
        .catch(err => console.error(err));

    } 

    componentDidMount(){
        this.getData();
    }

I am using node, express, Mysql as backend and react-native frontend

my backend code is here

app.get('/getAll',(req,res) => {
    console.log('getAll method Called');
    con.query('select * from dummy',(err,results,fields) => {
        if(err) throw err;
        console.log('Response');
        console.log(results);
        res.send(results);
    });
});

The above code gives correct output in console but fetch API is not.

i cant find solution for the my problem. Thanks in advance.

Answer 1

That indicates that you are logging the promise before it resolves - the result of when you: console.log(response.json())

How do I access promise callback value outside of the function?

As @Evert rightfully pointed out in comments, this is because response.json() returns a promise object.

So, you'll need to chain an additional .then() after you call response.json() where you log the resolved promise.

getData = () => {
    fetch('http://192.168.64.1:3000/getAll',{
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
} 

Answer 2

Add async and await to your code:

getData = async () => {
   await fetch('http://192.168.64.1:3000/getAll',{
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then((response) => {
        console.log('Response:')
        console.log(response.json())
        console.info('=================================')
    })
    .catch(err => console.error(err));

} 

Answer 3

So the issue is that you are not waiting for your Promise to resolve and this can be solved easily.

try {
  const res = await fetch(
    'your_api',
  );
  const data = await res.json();
} catch (error) {
    console.log(error);
} 

Answer 4

So the issue is that you are not waiting for your Promise to resolve. Have added await and that'll go next line once the await action is completed.

const user_fun = async (userId) => {
  const response = await fetch("url");
  const data = await response.json();
  console.log("users ", data);
  return data;
};
let data = user_fun();
console.log("users ", data);