JS Fetch API being weird

Question

I'm trying to use the Flickr API to display some of my public photos on a website. However I'm getting some errors that I absolutely can't figure out. The weirdest thing is that the code worked fine a couple of days ago, and debugging reveals that the query goes through as intended. The problem seems to lay in resolving the promise that fetch() returns.

function getPhotos(){
  const url = `${URL}${queryString('getPhotos')}`;
  fetch(url)
    .then((resp) => {
      const w = resp.json();
      return w;
      // get different results if with
      // return resp.json();
    });
}

Here in debugging mote, using the uncommented method, the status of the promise ends up as fulfilled. Looking at the json object I can see all of the photos there under . If I do return resp.json() directly, it returns undefined

async function generatePhotos(list) {
  const list = await getPhotos();
  list.then((resp) => {
    // always get 'list is undefined' error
    // JSON.parse(list);
    const photos = resp.photo;
    for (let i = 0; i < 3; i++) {
      generateImgElem(photos[i].id);
    }
  });
}

This function wont work, no matter what is returned from getPhotos(), the promise always comes out as pending.

What am I doing wrong here? I've searched around a bunch and as far as I can tell I'm using the fetch api correctly.

Edit: I'm getting errors that the variable list is undefined.

function getPhotos(){
  const url = `${URL}${queryString('getPhotos')}`;
  fetch(url)
    .then((resp) => {
      return resp.json();
    });
    // passes in undefined whether I stringify or not
    // .then((json) => {
    //   return JSON.stringify(json);
    // });
}

Have you tried logging your response json data though? Also, `async` function always returns a `Promise` as well so you will want to `await generatePhotos()` or `generatePhotos().then(photos => {/*...*/})` — ionizer, Dec 01 '18 at 18:49
You need to return something from inside `getPhotos`, not just inside the `then` callback. You probably want a `return fetch`. — Alexander O'Mara, Dec 01 '18 at 18:53
And yes, `await` expects a `Promise` as well, therefore you need to `return fetch(...)` so `generatePhotos()` does not return a `Promise` containing a `null` value. — ionizer, Dec 01 '18 at 18:56
Yeah when I try to return it to the log I just get the promise written out, not the actual data. Shouldn't await cause the rest of the code within generatePhotos() to not run until the promise is resolved? Also, having a return statement there was kind of stupid of me, the actual function just generates HTML elements which I felt wasn't important so I just put in some dummy code. It isn't supposed to return anything. I've updated the question, sorry about that! — gunnnnii, Dec 01 '18 at 19:15

Adrian Lineweaver · Answer 1 · 2018-12-01T18:56:14.290

0

try this

async function getPhotos(url) {
  const response = await fetch(url);
  const json = await response.json();
  return json;
}

when you do a fetch request it'll take some time to return something. Therefor youll most likely be returning an unfinished promise. Using async will guarantee that the fetch request is finished.

To turn it into an object.

@gunnnnii And what stops you from doing let myObject = JSON.parse(stringifiedThing);? – Adi 1 min ago

edited Dec 01 '18 at 18:56

answered Dec 01 '18 at 18:48

Adrian Lineweaver

276
2
10

But I'm not looking for the stringified json, I want the object. – gunnnnii Dec 01 '18 at 18:52
@gunnnnii And what stops you from doing `let myObject = JSON.parse(stringifiedThing);`? – Adrian Pop Dec 01 '18 at 18:55

JS Fetch API being weird

1 Answers1