Handling http requests [Vanilla JS]

1

Hi guys,

I struggle to figure out how I should implement http request into my simple vanilla javascript site. I want to get data from a api and display it in a apex chart.

I know how to handle this with fetch, axios or jquery. But each time a user goes to my site they will request data from the api? Or how does it work? If its true that each user request data from the api each time they visit the site how should I handle this?

Thanks :slight_smile:

2

Welcome, Mat.

It is difficult to answer your question. If you know how to do this with fetch and jQuery, then what are you asking for information on? Do you want to know the ins & outs of the HTTP?

Simply put, you have 3 options:

  1. User clicks button on your site, agreeing to fetch data (you could do this on document ready, but that depends on what data you are fetching, and if it is reasonable to assume a user would have no objection to a request being made automatically from their side).
  2. You host the data on your website’s client side (depends on the size of the data, and you would have to periodically refresh it).
  3. Have a backend requesting updated data, and serving it to the frontend (a simple set up with something like Express making the request, and MongoDB storing the data).

If you do not want to set up the backend, then option 1 is the clear choice; ask the user if they would like to make a request and download the data.

If you are more specific (some code, or clear and concise question), then I am sure we can be.

Hope this helps

3

Thanks Sky :slight_smile:

If you know how to do this with fetch and jQuery, then what are you asking for information on? Do you want to know the ins & outs of the HTTP?

Yes I know how to the HTTP request with the fetch api, jQuery or axios. But I really new at Javascript so I’m confused how it works if I include a .js file in my index.html and in that .js file I do the HTTP request. Then each user that visits my site will request the data from the api from their ip or does it go through my server?

I think it will only be my server that request the data if I do somekind of backend like you talk about and then display that data to the user. Is this correct?

  1. You host the data on your website’s client side (depends on the size of the data, and you would have to periodically refresh it).

Can you explain this or maybe have an example of this?

Thanks for your answer.

4

Well, unless you are using the IP address as some sort of identification, then it does not matter. Most API providers will expect a URI to come with the request, as the form of identification, but the request, in this case, comes from the user.

Yes. Depending on what you want to do, you can have the user request your server to make the API call, process the data (optional), and serve it to the user. This would be the recommended approach.

I did not phrase that very well. The best example of this would be:

  • You have a website hosted by GitHub Pages
  • It contains an html file and a jpg file
  • The HTML uses the link to the jpg file hosted in the same location as your html script.
  • The jpg is just as accessible as the html.
    In this case, the jpg represents your data. So, replace that with a json file. Now, you need to manually update the json file in your repo, but the user never needs to make an API call to get the data, because they got it with the HTML (not entirely true…they got it with the HTTP request to the domain).

NOTE: Anything to do with someone else’s data, you should ensure there is no license issue with:

  1. Someone else using your URI to request the data
  2. You serving the data to someone else.

I hope that helps.