Can't use data returned from Fetch API

Question

I am trying to get data from this API using fetch, and I know a promise pending is returned, but it isn't resolving itself so I can't use the data. I don't know what I am doing wrong.

function api () {
    return fetch('https://api.punkapi.com/v2/beers').then(respo => { respo.json() } ).then(data => { 
        const beersData = data;
        return beersData;
    }).catch(error => {
        console.error(error)
     }) ; 
}

api();

console.log(beersData)

if you add curly brackets, you must return the .json within `return respo.json()` — quirimmo, Apr 19 '21 at 19:01
You can't just do `api()`. You need to either use `async/await` or `.then()`, as in `api().then(data => console.log(data)`. It won't just "resolve itself". — Alexander Staroselsky, Apr 19 '21 at 19:03
Or remove the curly brackets so that return is implied: `.then(respo => respo.json())` — Terry, Apr 19 '21 at 19:03

score 1 · Accepted Answer · answered Apr 19 '21 at 19:05

First of all, you need to remove curly bracket in first then. respo => respo.json() is equivalent to respo => { return respo.json() }.

And second, you need to handle promise when you call api function since api() also returns Promise.

function api () {
  return fetch('https://api.punkapi.com/v2/beers')
    .then(respo => respo.json())
    .then(data => { 
      const beersData = data;
      return beersData;
    }).catch(error => {
      console.error(error)
    }) ; 
}

api()
.then(res => {
  console.log(res);
})

Can't use data returned from Fetch API

1 Answers1