Front End Development topics with a touch of humor
September 21, 2020
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.
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.
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.
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.)
fetch("https://programming-quotes-api.herokuapp.com/quotes/random") .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:
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?
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.
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?