Vivek Prasad

Fetch API

Vivek Prasad's photo
Vivek Prasad
·

3 min read

APIs are how the software we create interact with other software or server. For example, when a new user wants to sign up for an account and wants to use a 3rd party authentication instead of manually filling out each piece of information that's required to sign in. In this case, the website has to interact with that third party system to get all the user details.

APIs or Application Programming Interface can be seen as a way of communication between software or systems.

fetch() is one of the helpful tools built in JavaScript to perform this function. Let's see how it works.

What is Fetch API?

fetch() is a mechanism that helps you to make AJAX calls with JavaScript. Here AJAX stands for Asynchronous JavaScript and XML.

Fetch allows you to make a call to an external API without stopping the execution of other functions. This allows the site to function without breaking even when API call has not been resolved.

When a response(data) is sent back from the API, the asynchronous tasks attached with fetch call resume. A unique URL is called a endpoint that we use with fetch.

Let's understand this via an example. Suppose we are making a request to an external third party API to get a web page in return. Then for this we will simply use a GET request.

Simply call fetch() with the endpoint URL as the argument:

fetch('https://neog.camp/posts/1');

Trying to fetch blog post from external API

The response body for this endpoint will be information about a blog post:

{
userId: 1,
id: 1,
title: 'Mark One',
body: 'In this assignment, we will...',
};

Ultimately, you'll want to get the response body. But the response object contains quite a bit of information beyond the body, including the status code, headers, and more information.

Note that the fetch API returns a promise. Because of this, you need to nest a then() method to handle the resolution.

The data returned from the API is not usually in a useable format. So we'll need to convert this data to a form which your JavaScript can operate with. Thankfully, you can use the json() method to do just that:

 fetch('https://neog.camp/posts/1')
 .then(data => {
 return data.json();
 })
 .then(post => {
 console.log(post.title);
 });

Retrieving blog post from API and extracting only the title property

As you can see in the above code, you can nest a subsequent then() method to parse the data (I pulled out just the title in our case)

In this example, we simply wanted to get a blog post from the API. But what if we wanted to post a story instead we will have to make a post request.

Here are some points to summarize this article:

  • Software, Computer Systems or Servers share information or communicate with each other through a layer called an API.

  • An API contains the set of rules and protocols guiding how two or more systems interact. For example, Replit's system may interact with Github's system to get information on a user though an API.

  • In front end JavaScript, you can make simple API calls with the fetch() utility.

  • To make a simple GET request with fetch, you just need to pass in the URL endpoint as an argument.

  • To make a POST request, you'll need to pass along certain other parameters including a configuration object.