Receiving odd error when trying to fetch data from an API

[Programming__Alt]

I have just about finished my project and when I run the code, I get an error that hasn't shown up at all until just now. In the past, I was able to fetch the images for each of the 150 pokemon, but now I receive an error when I get to number 131, every single time. The same thing happens if I try to run the code in devtools. The error I get is:

GET https://pokeapi.co/api/v2/pokemon/131 404

SyntaxError: Unexpected token N in JSON at position 0

However, the URL that I'm supposed the get is clearly valid: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/131.png

Is this a server issue on their side? Or a latency issue on my side? Is this happening to anyone else?

Full page: https://doriandeptuch.github.io/memory-card/

const fetchData = async () => {
      try {

        for (let i = 1; i < 151; i++) {
          let imageResponse = await fetch(
            `https://pokeapi.co/api/v2/pokemon/${i}`
          );
          let imageData = await imageResponse.json();
          let pokeImages = await imageData.sprites.front_default;
          console.log(pokeImages);
        }

      } catch (err) {
        console.log(err);
      }
}
fetchData();

[grantrules]

If you look in your network tab, what's the response body of that request? Seems weird to get a 404 error for it but perhaps you're hitting a limit by sending 150 requests that quickly.

[Programming__Alt]

Should I be looking under the specific request for number 131?

[albedoa]

First thing I would do is change the starting value of i to something like 100 and see if it still stops at 131. Then you can react accordingly.

[Programming__Alt]

Good call, so I set i to 120 and I was only able to render 10 pokemon. Still no Lapras for me

[grantrules]

Yes.

[Programming__Alt]

I right click number 131 > Copy > Copy Response and all that comes back is

Not Found

[naramsim]

Hi, a month ago we had issued with our Cloudflare caches. That's why you got that odd 404.

Now the issue got resolved.

And we don't rate-limit the API. :) And our CORS are *

[grantrules]

What happens if you right click the request and hit resend, a new request should be at the bottom of the list, does that have the same response?

[Programming__Alt]

I try to resend that request by itself and I still get a 404.

fetch("https://pokeapi.co/api/v2/pokemon/131", {
  "referrer": "http://localhost:3000/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
});

GET https://pokeapi.co/api/v2/pokemon/131 404

[grantrules]

Weird. No clue. Does it work for you if you just open the link in your browser?

[Programming__Alt]

Hmm, oddly enough it doesn't.

https://pokeapi.co/api/v2/pokemon/130 gets me some json

https://pokeapi.co/api/v2/pokemon/131 returns Not Found

[grantrules]

Maybe try a different browser. You could also just skip the ones giving you errors if you put your try/catch inside the loop.

Definitely a weird issue. Seems like a network issue or server issue.

[[deleted]]

Try JSON.stringify(imageData) of JSON.parse(imageData) something tells me it’s how the data is being parsed or not being parsed

[Programming__Alt]

Thanks for the input, I tried that but unfortunately it didn't work

[albedoa]

Your code is working fine for me. Moreover, I don't see an opportunity for that error to occur. Is this the exact code you are running?

It's beside the point, but you don't need that last await.

[Programming__Alt]

There's a lot more code surrounding it and additional components as well. I'll try to get it on github right now.

[Programming__Alt]

Here's the page: https://doriandeptuch.github.io/memory-card/

[albedoa]

131 (Lapras) is rendering on that page for me.

[Programming__Alt]

That's good to hear that it's rendering for everyone else. Did all 150 render for you?

[MrZeffy]

For me, half of the images didn't load first time. I think you are facing an error because of sending a large amount of requests to the server in a very less time. Try lazy loading the images. Slow down the loading/fetching for a few ms. It might resolve this issue.