Front End Development topics with a touch of humor


Hook up to an API with Fetch

September 21, 2020

For someone who's learned some HTML/CSS and JavaScript and can make small programs on their own computer, reaching out into the internet is the next step. But how do you do this?

You'll need two things:

Whoa, says person who just learned HTML/CSS/JS--more acronyms? What does this even mean? What the heck is an API?

Okay. An API is a Application Programming Interface (that doesn't answer anything, does it?) More simply, an API something set up by programmers so that other programmers can use their stuff. Whereas a user might need a button, a form, or generally something to click on the screen, the API is the thing that other programmers use to get stuff.

Fetch is an API, provided by the JavaScript language itself, which helps you get (or fetch) resources over the internet. Like, other APIs.

Clear as mud? Well, don't worry. Sometimes, it's best to learn by doing. So let's use an API, and in the process, use Fetch.

Choose an API

Ah, the timeless wisdom of ... Now, if this quote doesn't seem that wise to you, I have an excuse: I have no idea what the quote says.

How can this be?

You see, I never read that quote. It's been provided by a resource over the internet, called "Programming Quotes API," and I got it using Fetch API. Very meta, no?

So let's start learning APIs by using this one. Programming Quotes API (PQA from now on, it's a lot to type!) is free, simple, and thus an ideal candidate for starting out.

PQA is a RESTful API, and these all operate in a similar way. Basically, you go to the provided url, and it sends back the information you're looking for.

Your first API call

Here, give it a try. (Hit the link)

So, assuming it worked, that brought you to a plain page with some text and numbers wrapped up in quotes and brackets. It looks a little sloppy, but you just used an API!

Now it's a little different when we want to access it with code instead of clicking on it. This is where fetch comes in. Let's start coding, shall we?

I suggest you follow along in the console. (If you don't know what that is, right click in the browser, go to Inspect, then go to Console. The empty window is the console.)

                .then(response => response.json())
                .then(data => console.log(data));

This is the basic format of a Fetch API request. Let's break it down by line:

  1. use the fetch command with the url of the API
  2. this returns a Promise, which becomes the argument for the function of the then method
  3. the then method returns another Promise, which becomes the argument of the next then method

If you don't know about promises or method chaining, don't worry about it for now (maybe another article later?). Basically what is happening is you are calling three functions, and each one's return value becomes the argument for the next one. It's a common pattern.

The (Line 1) fetch command goes to the url, almost exactly as if you had gone to that url yourself like you did before. Except you saved yourself a click. :) But when you went yourself, it outputted text onto the screen, this time it sends that information to your fetch request, and that is what is returned and (Line 2) used for the argument of the then method.

So fetch goes to the url, gets the text, and then that text goes into the chained then method. It is the "response" parameter and in this case will be operated on by the json() method.

There are a few more things to mention about the code, namely what is response, json, and data? Let's take it one by one, shall we?

So the "response" is what is passed into the then method, and the json() method is called on the response. The json method translates the text you got into a more readable, usable text (it translates JSON to a JavaScript object). This basically entails taking out some of the quotes and organizing it differently.

Once the json() method has translated the text, it then returns that to the next then.(Line 3)

The stuff I just mentioned is now called "data." That data is then logged onto the console. If you click on the little arrow next to the Object, you will see organized information, including the quote.

So what just happened? You used fetch to request information from an API. You then used json() to translate that into a JavaScript object. Then you logged that into the console. Enjoy the programming quote!

But wait, why is that cool?

You might be wondering why we did all this just to end up with some stuff in the console. It might not seem all that better than just going to the url and looking yourself. And how can I get awesome programming quotes on my own blog?

Well, now that we have this data, we can use it in a program! With a little JavaScript, we can output it to the screen, not just the console. If that sounds good, maybe that's a good idea for the next article.