How to return the response to console

Question

below code is showing 'undefined' in console. while the api has data inside it.

const getFakePerson = async () => {
  let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
  let { results } = res.json();
  console.log(results);
}
getFakePerson();

Result:

Result

It should be [`await res.json()`](https://dmitripavlutin.com/javascript-fetch-async-await/#2-fetching-json). — Andy, Oct 16 '21 at 06:11
@Andy Why we need `await` after response got from a request. it is not required. — Sparrow, Oct 16 '21 at 06:13
Because `res.json()` returns a promise which you need to wait for. — Andy, Oct 16 '21 at 06:13
You actually don't need to `await` the `getFakePerson()` call in this case because you don't care about the return value of the function. — zfj3ub94rf576hc4eegm, Oct 16 '21 at 06:16
Thanks @Andy you are right. we need to wait for the promise. — Shree Ram Sharma, Oct 16 '21 at 06:23
here you can see more options other than console.log https://stackoverflow.com/a/49402943/5448891 — Muhammad Muzamil, Oct 16 '21 at 06:29

score 1 · Answer 1 · answered Oct 16 '21 at 06:14

res.json() returns a promise. You need to await it.

const getFakePerson = async () => {
  let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
  let results = await res.json();
  console.log(results);
}
getFakePerson();

Alternately, you can use

res.json().then(data => console.log(data))

score 0 · Answer 2 · answered Oct 16 '21 at 06:22

From discussion and testing the code I knew that we have to add await keyword before res.json().

const getFakePerson = async () => {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results } = await res.json();
    console.log(results);
}
getFakePerson();

score 0 · Answer 3 · answered Oct 16 '21 at 06:24

0

The elephant in the room as pointed out already was that on line 3, there was a missing await for the res.json() call.

On top of that, I would recommend separating concerns here. Let the getRandomPerson return the person and then console.log later on in the process. Such as this:

const getFakePerson = async () => {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results: person } = await res.json();

    return person
}

getFakePerson().then(generatedPerson => {
   console.log(generatedPerson)
   // ... do more here ...
});

answered Oct 16 '21 at 06:24

marpme

2,363
1
15
24

1

You don't even need to await the parsed JSON. You can just do `return res.json();` because the returned data is still a promise. – Andy Oct 16 '21 at 06:31
Semantically that would mean something different then as we are extracting the `results: person` from the JSON object. – marpme Oct 16 '21 at 11:25

How to return the response to console

3 Answers3