Mastering Fetch to Send and Retrieve Data from A RESTful API

5 min readJul 10, 2020

Fetch is an AJAX function available for use in javascript that enables us to send a request to a remote server but before proceeding, let’s refresh on the RESTful convention for HTTPRequest.

GET: It’s a request that tells the server to send back some information.
POST: It’s a request that tells the server that you are sending some information to save.
PUT/PATCH: It’s a request that tells the server that you are sending some information to related to some data that it already holds and you want to update.
DELETE: It’s a request that tells the server that there is a piece of data that you want to delete.

If you want to dive deeper into RESTful API, you can do so by visiting the following link https://medium.com/@lazlojuly/what-is-a-restful-api-fabb8dc2afeb.

**Note: Keep in mind that following the RESTful convention is up to the developer, sometimes there might be a need to break them to achieve the desired result.

Now that we refresh the basics of how a RESTful API works, let’s dive into using our fetch to send and retrieve data from our server. For this example, we will be working with the following Dog API built-in ruby our API will be running on http://localhost:3000.

Since now we have a better understanding of how our RESTful API works, let’s start using our fetch to interact with our server.

Fetch Request

The fetch function in javascript takes two arguments, an URL (The path to the resource you want to fetch) and, an optional argument with additional information about the request. A fetch request returns a promise containing the response and inside the response is the JSON containing our data.

1.GET Request

It is the most basic of the request and it is really simple to set up, and the default request if the optional argument is not pass indicating otherwise.

This will return all records from the resource

If we want a specific piece of data, you can do so by submitting the Id at the end of the URL

We can verify these data by going into our API routes http://localhost:3000/dogs and http://localhost:3000/dogs/1

2. POST Request

A post request is a little different, the first thing we have to do is identify the data with want to sent to the server, in this case:

After we have the dog information, we create an object detailing all the information the server needs.

Before proceeding let’s understand the data object components. The method attribute helps us indicate our server what kind of request we want to make. It is necessary when making a POST, PUT, PATCH, and DELETE Request. The headers let us send additional information to the server, in our case the type of data we are sending. The body attribute is the actual data, we are sending. We call the method JSON.stringify() on our dog object because servers don’t understand Javascript objects, we need to convert our object to a JSON string.

Now we only have to call our fetch function and pass the data as an additional argument, this will create a new record of in our database. The return should be the new record with the information that we provided with and Id assign by the database.

We can also verify that specific entry by visiting our API route using the newly assigned id at http://localhost:3000/dogs/6

3.PUT/PATCH Request

A patch request is very similar to a post request, the main difference is that instead of creating a new record, it updates an existing one. Let’s update our last entry name from Lazy to Tiger. Let’s create a dog variable with the data we want to update.

Now we create our data object and change the method to PATCH

Then on our fetch request we, tell our server which record we want to update by providing an Id at the end of our URL.

We can see the result on the browser console or by visiting http://localhost:3000/dogs/6

4.DELETE Request

To make a delete request just need a data object indicating the kind of request and indicate the resource you want to delete by adding the id to the URL. Let’s delete our last record from the database.