How can I console log the promise result instead of the promise

Question

I have routes set up for a local api. So I am trying to retrieve the api data console log just the data. But whenever I run my code it console logs the entire promise. Any ideas on how to help?

This is my code:

const onPageLoad = async () => {
    const response = await fetch(`/api/project/projects`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
    })
    
    if (response.ok) {
        console.log(response.json())

    } else {
        console.error(err)
    }
}

onPageLoad();

This is what shows in the console log:

screenshot of console log

And remember [not to post pictures of text](/help/how-to-ask). Copy that text, and then paste it inside code formatting syntax. — Mike 'Pomax' Kamermans, Sep 14 '21 at 23:40
Note, you also have `console.log(err)`, but there is no variable named `err` defined. See my answer below for logging the reason why it wasn't `response.ok`. — jfriend00, Sep 15 '21 at 02:29
Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Doug Chamberlain, Sep 15 '21 at 03:08

jfriend00 · Answer 1 · 2021-09-15T02:29:06.497

You can await the promise from response.json() to get its value:

const onPageLoad = async () => {
    const response = await fetch(`/api/project/projects`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
    })
    
    if (response.ok) {
        let value = await response.json();
        console.log(value);
        // potentially do something else with value
        return value;
    } else {
        console.log('fetch() promise succeeded, but not with response.ok', response.status);
        throw new Error(`Got status ${response.status}`);
    }
}

onPageLoad().then(() => {
    console.log('all done');
}).catch(err => {
    console.log(err);
});

How can I console log the promise result instead of the promise

1 Answers1