Async useEffect does not work for fetching data

Question

This is the code snippet:

  useEffect(() => {
    async function fetchData() {
      const url = 'https://api.randomuser.me';
      const response = await fetch(url);
      console.log('response: ', response);
    }
    fetchData();
  }, []);

as you can see, it is an useEffect hook, calling a public API for some data, using async await in order to wait for the response.

But the logged data isn't containing what it should.

This is in console.log:

body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://api.randomuser.me/"
__proto__: Response

what's wrong?

That's a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) object. — Thomas, May 24 '21 at 19:03

score 2 · Answer 1 · answered May 24 '21 at 19:00

You need to parse the response in to JavaScript object, using response.json()


  useEffect(() => {
    async function fetchData() {
      const url = 'https://api.randomuser.me';
      const response = await fetch(url);
      const result = await response.json()
      console.log('result: ', result); // this the actual json response
    }
    fetchData();
  }, []);

Async useEffect does not work for fetching data

1 Answers1