In this guide, I’ll show you how to use the Fetch API (ES6+) to perform HTTP requests to an REST API with some practical examples you’ll most likely encounter.

Want to quickly see the HTTP examples? Go to section 5. The first part describes the asynchronous nature of JavaScript.

Note: All examples are given in ES6 with

A common pattern in today’s current web/mobile applications is to request or show some sort of data from the server (such as users, posts, comments, subscriptions, payments and so forth) and then manipulate it by using CRUD (create, read, update or delete) operations.

To further manipulate a resource, we often use

Here’s what we’ll address

1. Dealing with JavaScript’s asynchronous nature
2. What is AJAX?
3. Why Fetch API?
4. A quick intro to Fetch API
5. Fetch API - CRUD examples ← the good stuff!

1. Dealing with JavaScript’s asynchronous nature

One of the most challenging parts with understanding how JavaScript (JS) works is dealing with its asynchronous nature, a nature where things happen without order.

In most programming languages, we are wired to think that operations happen in order (sequentially). The first line must be executed before we can move on to the next line. It make sense because that is how we humans operate and complete daily tasks.

But with JS, we have multiple operations that are running in the background/foreground, and we cannot have a web app that freezes every time it waits for a user event.

Nevertheless, sometimes things must happen in order, otherwise it will cause chaos and unexpected results. For that reason, we may use promises and callbacks to structure it. An example could be validating user credentials before proceeding to the next operation.

2. What is AJAX

AJAX stands for Asynchronous JavaScript and XML, and it allows web pages to be updated asynchronously by exchanging data with a web server while the app is running. In short, it essentially means that you can update parts of a web page without reloading the whole page (the URL stays the same).

AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally common to transport data as plain text or JSON text. — w3shools.com

AJAX all the way?

I’ve seen that many developers tend to get really excited about having everything in a single page application (SPA), and this leads to lots of asynchronous pain! But luckily, we have libraries such as Angular, VueJS and React that makes this process a bit easier.

Overall, it’s important to have a balance between what should reload the whole page or parts of the page. And in most cases, a page reload works fine in terms of how powerful browsers have become. Back in the days, a page reload would take seconds (depending on the location of the server and browser capabilities). But today’s browsers are extremely fast so deciding whether to perform AJAX or page reload is not that of a big difference.

My personal experience is that it’s a lot easier and faster to create a search engine with a simple search button than doing it without a button. And in most cases, the customer doesn’t care if it is a SPA or an extra page-reload. Of course, don’t get me wrong, I do love SPAs, but does it really matter in terms of performance and development time?

In the end, it really depends on the use case, but personally I feel that SPAs require more development time and a bit of headache than a simple page reload, because you need to deal with their asynchronous nature. But I guess a couple of promises here and there will fix it, right?

3. Why Fetch API?

This allows us to perform declarative HTTP requests to a server. For each request, it creates a Promise which must be resolved in order to define the content type and access the data.

Now the benefit of Fetch API is that it is fully supported by the JS ecosystem, and is also a part of the MDN Mozilla docs. And last but not least, it works out of the box on most browsers (except IE). In the long-term, I’m guessing it will become the standard way of calling web APIs.

Note! I’m well aware other HTTP approaches such as using Observable with RXJS, and how it focuses on memory-management/leak in terms of subscribe/unsubscribe and so forth. And maybe that will become the new standard way of doing HTTP requests, who knows?

Anyway, in this article I’m only focusing on Fetch API, but may in the future write an article about Observable and RXJS.

4. A quick intro to Fetch API

The fetch() method returns a Promise that resolves the Response from the Request to show the status (successful or not). If you ever get this message promise {} in your console log screen, don’t panic — it basically means that the Promise works, but is waiting to be resolved. So in order to resolve it we need the .then() handler (callback) to access the content.

So in short, we first define the path (Fetch), secondly request data from the server (Request), thirdly define the content type (Body) and last but not least, we access the data (Response).

If you struggle to understand this concept, don’t worry. You’ll get a better overview through the examples shown below.

5. Fetch API - HTTP examples

If we want to access the data, we need two .then() handlers (callback). But if we want to manipulate the resource, we need only one .then() handler. However, we can use the second one to make sure the value has been sent.

Basic Fetch API template:

Note! The example above is just for illustrative purposes. The code will not work if you execute it.

Fetch API examples

1. Showing a user
2. Showing a list of users
3. Creating a new user
4. Deleting a user
5. Updating a user

Note! The resource will not be really created on the server, but will return a fake result to mimic a real server.

1. Showing a user

As previously mentioned, the process of showing a single user consists of two .then() handlers (callback), the first one to define the object, and the second one to access the data.

Notice just by reading the query string /users/2 we are able to understand/predict what the API does. For more information on how to write high-quality REST API, check out these guidelines tip written by Mahesh Haldar.

Example

2. Showing a list of users

The example is almost identical to the previous example except that the query string is /users, and not /users/2.

Example

3. Creating a new user

This one looks a bit different from the previous example. If you are not familiar with the HTTP protocol, it simply provides us with a couple of sweet methods such as POST, GET,DELETE, UPDATE, PATCH and PUT. These methods are verbs that simply describe the type of action to be executed, and are mostly used to manipulate the resource/data on the server.

Anyway, in order to create a new user with Fetch API, we’ll need to use the HTTP verb POST. But first, we need to define it somewhere. Luckily, there is an optional argument Init we can pass along with the URL for defining custom settings such as method type, body, credentials, headers and so forth.

Note: The fetch() method's parameters are identical to those of the constructor.

Example

4. Deleting a user

In order to delete the user, we first need to target the user with /users/1, and then we define the method type which is DELETE.

Example

5. Updating a user

The HTTP verb PUT is used to manipulate the target resource, and if you want to do partial changes, you’ll need to use PATCH. For more information on what these HTTP verbs do, check this out.

Conclusion

Now you have a basic understanding of how to retrieve or manipulate a resource from the server using JavaScript’s Fetch API, as well as how to deal with promises. You can use this article as a guide for how to structure your API requests for CRUD operations.

Personally, I feel that the Fetch API is declarative and you can easily understand what is happening without any technical coding experience.

Please share your thoughts.