LOG {"_U": 0, "_V": 0, "_W": null, "_X": null} inside fetch API

Question

I am getting this error when I console data returned from function that fetch data from back end

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

here is below the code:

const events_data = [];
function getvals() {

    return fetch('http://PCIP:3000/users/timetable')
        .then((response) => response.json())

        .then((output) => {
            return addData(output, events_data);
        })


        .catch(error => console.log(error))
}

function addData(data, data2) {
    data.map((d) => {
        data2.push({
            title: d.name,
            startTime: genTimeBlock(d.day, d.start_time),
            endTime: genTimeBlock(d.day, d.end_time),
            location: d.location,
            extra_descriptions: [d.extra_descriptions],
        });
    });
}


const data = getvals();
console.log(data); // the error come from here

I have checked answers here but nothing worked for me

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

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

score 1 · Accepted Answer · answered Jan 16 '21 at 12:26

This is because the fetch promise has not return a response yet,

There two way to solve the issue , first you create another async funciton and use it to await for the response

const events_data = [];
async function getvals() {

    return fetch('http://PCIP:3000/users/timetable')
        .then((response) => response.json())

        .then((output) => {
            return addData(output, events_data);
        })


        .catch(error => console.log(error))
}

function addData(data, data2) {
    data.map((d) => {
        data2.push({
            title: d.name,
            startTime: genTimeBlock(d.day, d.start_time),
            endTime: genTimeBlock(d.day, d.end_time),
            location: d.location,
            extra_descriptions: [d.extra_descriptions],
        });
    });
}

async function waitForResponse() {
let resp = await getvals();

return resp;
}

const data = waitForResponse();
console.log(data); // the error come from here

The other way would be using state hooks, passing the return obj to state hook on response.

Can you tell me what you want to do, you will need call it inside a class or functional component to be able use it, if you don't want to swtich to a functional component then there is one thing we can do is ```` const test = waitForResponse() .then((resp)=>{ // place your rest of code here }); ```` — S.N.B, Jan 17 '21 at 06:03
actually i switched to functional component and it worked for me, than you so much — alobe, Jan 17 '21 at 09:12

score 0 · Answer 2 · edited Sep 21 '21 at 10:29

Function for API call:

  export const getApplication = async (URL, headers) => {
    let data;
    await fetch.get(URL, headers).then(res => data = res.data).catch(err => err);
    return data;
  }

You can call the API from anywhere after importing it:

      getApplication(`your url`, {
        headers: {
          Authorization: AUTH_TOKEN,
        },
      }).then(res => console.log(res)).catch(err => console.log(err));

LOG {"_U": 0, "_V": 0, "_W": null, "_X": null} inside fetch API

2 Answers2

Linked