Fetch and HTTP Methods

What is fetch()?

The fetch() method is a useful tool if you want to use third-party APIs in your website or if you created your own .json file and want to use data from there. The best part about fetch() is that it is an asynchronous function and it will run in the background. For you to fetch all you have to do is to paste a link to an API or JSON server data from which you want to use. After you fetched data successfully you will use .then() and .json() methods to extract JSON body content from the response, after that you can do whatever you want with that data.

Besides .then() you can also use the .catch() method. The catch method is used for error handling, for example, if your fetch was not successful .catch() will “catch” the error and will return it to you. To make it easier to understand if you want to do something when your fetch was not successful you will want to use .catch().

Here is an example of code using fetch, then, and catch methods:

fetch('http://example.com/db.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(() => console.log("Fetch was not successful"))

In the example above we are getting data from a server, which means that we are using the “GET” method, and what it does is that it simply takes data from a server and returns it back to us.

NOTE: You can think about “GET” like a waiter in a restaurant.

But what if we want to send data back to a server? That is where the “POST” method comes up.

What is the “POST” method?

The “POST” method sends data back to a server. If you have your own .json file and you want to create a new object inside of your array you should use the “POST” method. The syntax for “POST” is a little bit more complicated than “GET”, but I will explain it to you step by step.

First, just like with “GET” you want to use fetch(), to fetch the server or an API, then you will “tell” JavaScript what method you want to use (in our case it is “POST”). Then you will use “headers” to show what type of data you are sending to the server. After that, you will use “body” to stringify and show what data you want to send. To stringify data you will use JSON.stringify() (all data you are sending back to a server must be a string).

It might sound complicated, but after you take a look at the code you will realize that it is not that hard. Here is an example of the “POST” method:

const dataYouWantToSend = {
 name: "John",
 age: 29
}
fetch('http://example.com/db.json', {
  method: "POST",
  headers:{
  "Content-Type":"application/json"
 },
 body: JSON.stringify(dataYouWantToSend)
})

What is the “PATCH” method?

The “PATCH” method can edit data that already exists on your server. If you want to update one of your object’s values, “PATCH” is here for you! Just like with “POST” you have to fetch an API or a JSON server, but when you are using “PATCH” you must specify what object and what value you want to modify. The way you can do that is in your fetch link after your JSON file you will put “/” and then you will type in the ID of the object you want to update.

NOTE: When you are using “PATCH” always use an ID to specify an object, otherwise fetch will throw an error.

This is the only difference in syntax between “PATCH” and “POST” the rest of the code will stay the same. See, not that hard at all! Here is an example of fetch using “PATCH”:

const dataYouWantToEdit = {
 name: "Bob",
 age: 23
}
fetch("http://example.com/db.json/2", {
 method: "PATCH",
 headers:{
   "Content-Type":"application/json"
},
 body: JSON.stringify(dataYouWantToEdit)
})

What is the “DELETE” method?

The “DELETE” method speaks for itself, this method just deletes specific data in your server. The syntax of the “DELETE” method is similar to “PATCH”. All you have to do is in your fetch link specify what object or value you want to delete and then just select the “DELETE” method and you are done. Here is an example:

fetch("http://example.com/db.json/2", {
 method: "DELETE"
})
.then(response => response.json())
.then(data => console.log(data))

As a bonus, I will quickly tell you about HTTP response status codes. There is a lot of them, but as for now, I will tell you about the most common of them.

200 — means that the HTTP request was completed successfully.

304 — means that response has not been modified.

404 — means that server cannot find the requested resource.

500 — means that server has encountered a situation it does not know how to handle.