This blog will be about the basics of a vanilla javascript fetch request. It will break down what one is actually trying to do when one makes a fetch request, what happens, and how to do it.
So what is a fetch request? A fetch request is a network request from javascript under the umbrella term AJAX (Asynchronous JavaScript And XML). The idea behind asynchronous functions is a different story, but it essentially means that while something is happening other things can happen at the same time. Generally a fetch request is intended to be asynchronous.
In order to make a request, we need to have something to request from. A url is required to make a request, generally this will be a body of data.
By default a fetch request is a "GET" request. This means that we will be just getting data, not changing it, adding to it, or deleting it.
1 fetch('http://example.com/movies.json')
2 .then((response) => {
3 return response.json();
4 })
5 .then((myJson) => {
6 console.log(myJson);
7 });
This is the basic template for a fetch(GET) request. Line one of the above image has the fetch method, along with the URL of our example server or body of data. When one first does this, what they will receive is a response "promise". Again, what a promise is exactly, is a different subject, but for our intents and purposes we just need to know that in order to resolve them we need to call line 2 (.then on our response) and then call an anonymous function to return the response converted to JSON(JavaScript Object Notation).
Response {type: "cors", url: "http://localhost:3000/players", redirected: false, status: 200, ok: true, …}
type: "cors"
url: "http://localhost:3000/players"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true
__proto__: Response
This is an example of what a response might look like. When first doing fetch requests, personally, I think it is wise to console log a lot of what we are doing so we can see what kind of information we are working with and how it is structured. We see here that this response still needs to be resolved, so we use .then on our JSONinfied response and then we can do something with that. In this picture we console log our resultant data.
(24) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
When we see this, we notice that we have an array of objects. What is interesting is that this isn't an actual array. It just has array like properties and we can treat it as such. We come back to this :
1 fetch('http://example.com/movies.json')
2 .then((response) => {
3 return response.json();
4 })
5 .then((myJson) => {
6. //comments
7 //iterate through myJson
8 //do stuff with our objects
9 });
In this we change our anonymous function in our second resolve. Instead of console.logging our data, we (in comments) iterate through our array-like thing of objects and do stuff with our objects. Thus we can manipulate our data, or maybe add it to the DOM or whatever we want!
Top comments (0)