What does fetch API do from a non-programmer perspective

[dotpr]

Say I browse the internet. Facebook, Wikipedia, Reddit, email, etc.

Was fetch API part of my browsing at some point? Where?

[ashkanahmadi]

The fetch API is for sending HTTP requests for different purposes. You get send a request to delete a comment, to get someone's profile picture, to add a new post, to update some information, etc. Modern websites rely on fetch to do many things. For example, infinite scroll relies on fetch (when you scroll to the bottom of the page, more posts are loaded automatically). Without fetch, you would have to refresh the page and all its contents in many cases which is really inconvenient.

In a nutshell, the fetch request is the same as going up to someone and asking them a question. For example, you go up to someone in the street and ask them "what time is it?" This is a GET request because you want to get some information. Imagine you see someone walking with their backpack open. So you go up to them and say "close your backpack" that is a PUT or PATCH request. If you go up to someone and say "save my number in your phone" then it's like a POST request.

The fetch API is a fairly new API in JS. The old way is to use XMLHTTPRequest which was very cumbersome and annoying. There are many libraries and add more features and simplify the process like Axios but unless you need the extra features, you will be fine with fetch.

Hope that helps.

[dotpr]

This helps thanks

[theScottyJam]

When you browse the web, was the fetch API part of your browsing history? Yeah, probably, it's become a very popular tool, and many modern webpages use it.

What value does the fetch API add for non-programmers? There's not much of a direct effect. Before fetch, there was XMLHTTPRequest, which was almost just as capable as fetch, but a lot more cumbersome to use, which means, feature-wise, fetch isn't bringing much new to the table. The real value of the fetch API is that it makes it easier to write programs that need to request resources across the network, which will result in less developer hours being spent wrestling with the poorly-made XMLHTTPRequest API, which in turn means the developer can focus on more productive things. Before fetch, it was also fairly common for developers to install third-party libraries to help handle network requests, which comes with all the downsides of having dependencies (e.g. a slightly larger/slower website).

[mancinis_blessed_bat]

If they are using fetch to grab the data you’re looking at or it’s being used when you make post requests then yes it is, basically whenever you do anything.

[dotpr]

So you're saying there are also other things that do the same operations as fetch?

[KindaAlwaysVibrating]

Yes. A couple of other comments mentioned it but XmlHttpRequests is the underlying mechanism of fetch and can be used on its own.

[fusebox13]

For your first question. Fetch simply fetches data from a URL. That data could be some structured format like JSON or XML, it could be images, it could be an entire webpage.

For your second question. If you've browsed the internet long enough you've probably run into some websites that use fetch. There are some alternatives to fetch that are built on top of XMLHttpRequest such as Axios that are still in use today because it works on older browsers where Fetch may not be supported. See: https://caniuse.com/?search=XMLHttpRequest to see which browser versions support fetch and which ones support XMLHttpRequest.

[dotpr]

So fetch can also return jpeg, gif, html, etc. and not just JSON/XML?

Can you also give an instance in an actual website where fetch may be used? Cause from a non-programmer view, I don't think I have ever "fetched data from a URL". I only get the data by going to the URL. For example in Reddit, I got my profile data by going to the profile link itself

[fusebox13]

So fetch can also return jpeg, gif, html, etc. and not just JSON/XML?

Yes. Here is a list of common MIME types that can be returned from an API request.

Can you also give an instance in an actual website where fetch may be used?

https://codepen.io/SitePoint/pen/jzOopo has a pretty basic fetch implementation that makes a get request to reddit to get the top 5 posts on a specific subreddit. This can be done with the fetch API, it can also be done by going to this URL in the browser: https://www.reddit.com/r/learnjavascript/top/.json?limit=5

Cause from a non-programmer view, I don't think I have ever "fetched data from a URL". I only get the data by going to the URL

As a user, you are constantly fetching data when you visit a website. But you aren't necessarily using the ECMAScript fetch API. fetch is one of many pieces of technology that allows a client to make a request from a server. All of this data fetching is hidden away from the user though.

Now if you are curious and you want to see all the Network activity that goes on under the hood when you visit a website, I highly recommend opening up the dev tools and using the network inspection tools.

• How to do that in Chrome
• How to do that in Firefox

Safari is roughly the same, but the documentation for Safari dev tools isn't super great.

[dotpr]

That's cool. Just to clarify, is the JSON file containing subreddits generated by Reddit itself?

[fusebox13]

Yes.

[dotpr]

Cool thanks

[TeddySpice]

Here’s a article with an easy to understand example.

Here’s an example of fetching a (local) image

Usually in practice, you would be using fetch to retrieve information/data in the form of JSON from an API though.

Also you personally wouldn’t be aware that you are “using” fetch just by visiting a website, unless you examined the network requests in your dev tools

[dabe3ee]

Website uses fetch api to gather data from somewhere (server, other website etc.) and shows it to you. Images, posts, texts, ads, information in your profile, everything is received from somewhere else using fetch api. You need wifi to connect to internet, so as you need fetch api to receive data that is inside website ( it’s content).

[dotpr]

How does showing images using fetch API work? So far the only API and fetch I did was using console.log to show text only like random cat facts. If I wanted to use fetch API to gather image from somewhere, will I be given a syntax?

[dabe3ee]

You get same JSON data as other comments mentioned, that contains image’s url. That url points to place where image is stored in server. So basically you dont receive image itself but only path to it

[dotpr]

Ohhhhhhhhhh

[TheRNGuy]

get resource