Fetching an API with “fetch()”

Photo by Ilya Pavlov on Unsplash

API or Application Program Interface can be many things in the world of programing. In essence, they are a form of data that can be passed from the client to the server and vise versa. This data can be anything from a defined function to a Boolean etc. What makes them so important is that they are the building blocks of many of the websites you visit today. The word “consume” is often passed around when talking about APIs. This is the process of taking an API and decoding it to fulfill its purpose because otherwise it would be quite useless. As you read this article keep in mind that APIs are a form of data and nothing more. In their simplest form they could be compared to your first JavaScript application or as complex as you want them to be. It’s all a matter of the intent behind why it’s being used and weather or not it is fulfilling its purpose.

JSON

A popular form of API is composed in “JSON” format or JavaScript Object Notation. This is a format by which many APIs today follow because of how easy it is to read. Let’s see what it looks like.

{
  "puppies": ["golden retriever", "beagle", "pug"]
}

JSON is basically just a JavaScript object with key value pairs with a few key differences. The first and most noticeable being the “key” which in this case is “puppies”. It has parenthesis while in a normal JavaScript object their is no parenthesis on the “key”. This is because compiled JSON is a giant string. The second difference is the fact that the containing object has no variable name. This is because when we consume it we store it inside a variable.

JSON is really cool if you think about it because a string is one of the simplest forms of data, which makes it a really efficient form of data to transfer around. After JSON data is consumed, it takes the form of a regular JavaScript object allowing developers to manipulate it. Pretty clever right?

Consuming

Consuming JSON data is pretty simple now but it used to be much more complex. Today we use a promise based method called “fetch”. If you don’t know what a promise is it’s basically just a function that spits out a value when it resolves true and another when false. Let’s take a look at “fetch”.

fetch("API URL or the directory location")

Fetch takes the location of an API as an argument and processes it. However, to use it’s data we need to “handle” it. Promises need to be handled because they depend on it. Once “fetch” is fired, it will spit out a value. To consume this value the “then” method is used.

fetch("API URL or the directory location").then(data => console.log(data))

Then is passed the data when the promise resolves to be true. The “data” variable is the non-processed JSON data that was received. Before processing this data, we have to fulfill the other end of the promise. This can be done with the “catch” method. The “catch” method can be chained on to the “then” method. “catch’ is triggered when the promise resolves to be false. It’s important to use this method because when consuming an API errors can occur because servers aren’t always reliable. This allows developers to notify the client that their was an error. Error handling is for another topic on another day.

fetch("API URL or the directory location").then(data => console.log(data)).catch(error => console.log(error))

Processing the JSON

In order to use JSON data we need to convert it into a JavaScript object. This is when we use the “json” method. This method is attached to the JSON object turning it into a regular JavaScript object which can be used.

fetch("API URL or the directory location")
.then(data => {
  data.json()
})
.catch(error => console.log(error))

But guess what? The “json” method is another promise that can be resolved or rejected. If the data is valid JSON data it will resolve true, otherwise false. For the data to be used another “then” method is chained onto the the “json” method.

fetch("API URL or the directory location")
.then(data => {
  data.json()
.then(data => {
sendTheData(data)
})
})
.catch(error => console.log(error))

That’s it! Once the data is processed into a regular JavaScript object developers are able to manipulate it. In this case I used a function called “sendTheData” with “data” as the argument so that I can use it in my script. Once promises are drilled into your head, using fetch to consume your APIs will be as easy as pie!

Hope this helped you understand APIs a little better!