That’s So Fetch

So you’re like me, and you’ve started using Javascript on the front end while using some sort of JSON formatted data on the backend. That awesome! But as awesome as it is, this new concept comes with a few techniques that you’re going to want to wrap your head around.

In order to retrieve data from the backend, you have to ‘fetch’ that data from the database. There are also a few different types of fetches you’’l need to be familiar with so let’s start with the most basic:

In order to make any request using fetch, you’ll need some sort of base URL to plug in as the first argument, like so:

The code above will return to you a Promise. A promise is an object that represents the data sent back from the server. It is not, however, the actual data. Instead, we have to next call a ‘then()’ method to actually take out the content from the server’s response. This method takes in a function as its argument and must return the content of the server’s response. Take this fetch, for instance:

This can also be written as an arrow function, like so:

Finally, we add call another ‘then()’ method in order to actually do something with our newly formatted data. A great first step would be to log your data to the console, in order to see what you have and think about how to handle it. Here you have it… A full-fledged fetch from a server of your choosing!

It just so happens that the code we just wrote is everything we need for a ‘GET’ request from a server’s index page of users (or database of your choice). We could refactor this code to receive a single user’s data by adding their database ID number to the end of our base URL like so:

Next up…

The ‘POST’ Request

POST requests are similar to GET requests in that they require a base URL as an argument. They also, however, require ‘options’ as another argument. These ‘options’ are actually a single object that include keys for ‘method,’ ‘headers,’ and ‘body’ of the request. Our options might look something like the following. Pay close attention to what are written as strings here:

Notice how the ‘body’ key’s value takes in an object that we have previously created. This must be passed in as an argument for JSON.stringify() in order for the object to successfully be ‘POST’ed to the database.

A full POST request will look something like this:

The ‘PATCH’ Request

A PATCH request is very similar to its predecessor, POST, in that it also requires an ‘options’ object as a second argument. The first argument however takes a URL that is, again, appended the ID of the database object you are trying to PATCH.

Let’s look at the ‘options’ for this fetch. I might have a User whose object looks like this:

{firstName: "Ian", lastName: "Rose"}

The last name is obviously misspelled. To fix this in the database, I would make a PATCH request and place the correct object into JSON.stringify() in the body, like so:

Last but not least…

The ‘DELETE’ request

The DELETE request is quite possibly the simplest fetch out of the four that we are going over here. Much like the PATCH request, the DELETE takes an argument of a URL appended by the ID of the object you would like to remove from the database. Unlike PATCH, the DELETE request does not take any ‘options’ past the ‘method,’ nor does it require any ‘then()’ methods. Since you are deleting an object from the database, what do you really need to render upon completion of the object’s deletion? A DELETE request, simply put, should look something like the following. Keep in mind, that since the ‘options ’are shortened, we are placing the ‘options’ object directly into the parameters of the fetch, instead of first storing it in a variable…