Using Fetch API to GET and POST requests

GET REQUEST

According to Google’s Progressive Webs App Training, Fetch API is a simple interface to “GET” resources from the server side of the internet. In other words, it is the new and improved way to make requests and get responses back, for data over the internet compared to the older model XMLHttpRequest that was dominant until 2015 when ECMAScript2015 (aka JavaScript) released the Fetch API version. With this newer version of JS (JavaScript) came the addition of the Promise object that’s used to handle asynchronous operations and to alleviate the burden of having to use callbacks that lead to code that was hard to manage, and boilerplate code that was used with XMLHttpRequest. The process of working with requests and responses became much easier with the use of promise.

Now that we have some background information on what Fetch API is let’s take a look at how a GET request with promise works!

image from MDN web docks “Using Fetch”

The code snippet of code above is a basic fetch request. On line one the fetch() method takes in only one argument — the url you are requesting to get data from. In this case it is ‘http://example.com/movies.json’.

On the next line we see: .then() method that contains ‘response => response.json()’ :

Here we are introduced to the concept of Promise. In JavaScript a promise is like that of a real life promise. When I go to ShakeShack after I place my order, I am given a buzzer to let me know when my order is ready to go. The buzzer represents a promise that my food will be ready when the buzzer goes off. So here we send our request and get back a promise that we will get a response back (in JSON form known as the Response Object). So what’s happening here in the second line is;

We then chain the promise with the then() method, which captures the HTTP response in the response argument and call its json() method. The json() method parses the response body to a JSON object. However, it returns that as a promise. — Arpan Abhishek “Using fetch to Send HTTP Requests in JavaScript”

Please note that a promise can come back in one of the following forms:

Image from https://attacomsian.com/blog/promises-javascript

Let’s assume that the response returned is fulfilled or successful now we have our food that was handed to us in a box. Great! Now however, we cannot get to the food inside yet. Wha? In order to get at the food we need a way to get into the box, this is where the second .then method comes in. Since the first .then method returns a promise the second .then method allows us to access the information inside the promise by logging it to the console. Hence the third line:

.then(data => console.log(data))

POST REQUESTS

Now let’s look at how a basic “POST” looks and break it down to understand how it all works together! Take a look at the code below:

Image from https://stackabuse.com/using-fetch-to-send-http-requests-in-javascript/

With the Fetch API you can make more then just GET and POST requests as there is also PUT, DELETE, UPDATE, etc. as well as posting data and creating custom request headers or request objects.

Using the sample code that Arpan Abhishek provided in his article on “Using fetch to Send HTTP Requests in JavaScript” he states that the first thing done here is create a todo object that contains the data or information we want to send to the API. Then he moves on the use the fetch() method (just like in our Get request) and puts in the url for the data we want back. This time, however, an object was added as the second argument. The argument has the properties of:

Image from https://stackabuse.com/using-fetch-to-send-http-requests-in-javascript/

Note: the JSON.stringify() method is used here because data sent to the web server has to be a string format. Therefore, the object gets converted into a string withe JSON.stringify().

Note: the header lets the app know what kind of data was returned and how to handle that data.

Once the data from the server is returned we can process the JSON response by logging it to the console just as was done with the GET request.

Quick Note about .catch()

When handling requests with fetch() as mentioned earlier sometimes the response is can be rejected, or a network error has occurred. To handle this kind of response we can use the catch() method and chain it to the .then() methods or the promise. To be clear, a response can be an error message such as the famous “404 page not found”as that is response:

So it is good practice to always check your responses.

This completes the basic set up and use for the GET and POST Fetch API requests. To learn more about the different ways you can use the Fetch API requests use the following links for solid resources which are the same resources I used for this blog:

Using Fetch

Using JavaScript Fetch API to Get and Post Data

Fetch API

Using fetch to Send HTTP Requests in JavaScript

Fetch API Tutorial for Beginners: How to Use Fetch API

Asynchronous vs Synchronous Programming

JavaScript | Promises - GeeksforGeeks