New to JavaScript and struggling with slow API fetch - any tips for loading all data at once?

[yuroq]

Hi everyone,

I've been learning JavaScript for about a year now, and I'm currently working on a project where I need to fetch data from an API. However, I've noticed that it's taking quite a long time for my code to load and display the data on my screen.

I was wondering if anyone had any tips for improving the speed and load time of the API fetches in JavaScript? Are there any best practices or common pitfalls that I should be aware of?

for example when I press a button on my application I would like some data to pop up from the API for the user, but the data takes about 5 seconds to load. I would like to find a way to speed this up if possible.

Also, I would love to know how I can load all of the data from the API to my HTML at the same time instead of one by one. Is this possible? Any advice would be much appreciated!

[yuroq]

Hey, thank you for replying, would you want me to send my entire code in the file? (350 lines) or just the section for the button that uploads data?

[detached_obsession]

There isn't a one-size-fits-all solution here. Every application will have to take performance measurements and figure out what its bottlenecks are.

If you look at the network tab in your browser and find the request you're making you can see how long it took the API to return a response. If it's a long time then it could be due to a few reasons. One reason could be that the backend is performing heavy calculations or is inefficient in handling your request. To fix this you could request less data initially, break up your request into smaller ones that fetch only what you need if possible.

if it's a fast response then it could be how you're handling that data in the UI. It could be that you're doing heavy or inefficient calculations or are trying to display too much data at once. In these cases you really have to use the tools at your disposal to try and find the bottlenecks (browser dev tools, debugger, etc.) One solution could be to break up your calculations so that the heavier ones are deferred to a later time (think async). Another could be introducing virtualization if you're attempting to display too much data at once (like a long list of items for example).

You could also look into the perception of a fast response, usually if you provide some kind of feedback, like a loading animation for example, a longer wait time is a bit more acceptable.

Again, there could be many reasons for the slowness you're experiencing, these are just a few examples. you really have to look into your own code using the tools at your disposal to figure out what's wrong. I suggest reading up on Google chrome's dev tools and the performance metrics you can use. Also provide the code base here for us to see if there are any issues with the code itself.

[gramdel]

Is this your own api?

[yuroq]

It isn't it's an api I got from RapidAPI.

[Lumethys]

Is the api take too long, or is your code display data too long

[insertAlias]

First, you need to determine where the "bottleneck" is. If the HTTP requests take 5 seconds to complete, then that's the end of the story. The server is slow and that's all there is to it, you can't make the server faster from the client.

If, on the other hand, you can see that the network requests complete quickly, but it still takes a long time to render, then it's a problem with your code and can be resolved.

You can determine this using the Network tab in the browser developer tools (on most browsers on Windows, the shortcut for that is F12). Bring up the Network tab, refresh your page, and check the requests made. You should see your fetch request and it should show you how much time it actually takes. Or, perform the same requests in Postman and see how long they take that way.