Fetch API For Beginners

Make your first application using the Fetch API

In this tutorial, I will be explaining how to fetch data asynchronously from an external API using the Fetch API. I believe in learning by practice, so here’s the application we are going to build today!

The app we will be making today.

As usual, I will provide you with the Github repository at the end of this article.
The app will cover:

• Getting data from an external API (we will be using the placeholder API).
• Filtering the fetched data.
• Submitting data to the API.

First of all, we’ll need an interface to work with:

Our basic interface.

It will look something like this.

I am using bootstrap 4 here so we can avoid the custom styling.

Note: In case you are wondering what babel is (included within the script tag); it is simply a JavaScript compiler. It will basically convert the code in ES6 to regular JS. That is for browser compatibility’s sake. You don’t have to include it unless you’re taking browser compatibility into consideration. You can read more about it here.

1. Getting the data from the API

In order to get data from a server, we need to make an HTTP request.

The traditional way is to use AJAX, thus, our code would look something like this:

Admittedly, this way is kind of long and can become really tedious at times. That’s when the Fetch API comes into place; it is a really powerful web API to make asynchronous requests feasible. What I love about Fetch is that it returns a Promise.

A promise is an object returned by a module, library, function, that will be resolved or rejected some time in the future.

To get data using fetch , we’ll only need the endpoint URL which is the URL that we can use to access the data provided by the web API.

Now let’s break it down step by step:

• We used fetch to send our request which returns a promise.
• We called .then() to have access to the response that the API has provided, and then we returned it as JSON.
• When the first promise gets resolved, we get the received data and display it to the DOM.

More about promise chaining

Note: Don’t forget to add an EventListener to your button:

document.getElementById('postBtn').addEventListener('click',getPost);

You can add additional functionalities here such as searching for posts by title or id as in the example below:

This is what we've come across so far:

2. Submitting data to the API

Now, what if you want to send data to the server?

With fetch , that’s pretty simple. It is the exact same process except this time, we’re going to add some options such as: the method, headers and the body.

Example of options that you can add.

Now let’s create our submitPost() function:

It is that simple. Once you get a hold of the concept, the code will be much easier to play with.

If you enjoyed this tutorial, please click the 👏 button and share to help others find it! Feel free to leave a comment below if you have any questions.

Github repository