The Very First Step to Use API

5 min readFeb 8, 2021

If you recently started learning JavaScript and doing some tutorial, you may have heard of API(Application Programming Interfaces). It is one of the most complicated concept for beginners and lots of them get stuck on it. In this article, I would like to explain its concept as easy way as possible and show the basic way to use API and show some simple example.

1. What API is basically used for?

To make things very simple, API is “a certain set of programming or data that can be transmitted through the internet.” Some websites use one API to get a set of data, like a database, or some use one API to implement search function. Also, some API have a set of these function, database and search function. What we actually need in order to enjoy the function is API URL. The URL is usually displayed on API websites with some use cases and syntax.

Now let’s see how to put the code to use API in a simple example.

2. How to actually use API in your code.

It’s time to actually call API into our real code. There are several ways to use it but this time, I would like to show an example using ‘axios.’ Don’t worry, it is not that complicated and I’ll explain it step-by-step.

2.1 Create a simple HTML and JavaScript file

First of all, let’s create an HTML file with just necessary parts and a blank JavaScript file, like index.html and app.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First API</title>
</head><body>
    <h1>First API</h1></body>
</html>

This is only necessary part right? In this code, let’s include app.js and a package of axios. These two should be right above the body’s closing tag.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="app.js"></script>

Now the editor should look like below and we are done with the HTML file for this example.

Here, please be careful not to put two script tag in reverse. HTML file will be read from top to bottom, line by line. If we put them in reverse, when axios in app.js is read, the package is not read yet, which means we are not ready to use axios in app.js. Thus, an error like below will occur. That also means that if you get that error, it might be better to see the order of script tags.

Next up, let’s edit app.js, where we actually use API. For this example, we are using PokeAPI which provides a bunch of data of Pokemon. If you want to know more about this API, check the link below.

PokéAPI

An open RESTful API for Pokémon data

pokeapi.co

2.2 Get data from API and show the result

Let’s create a function named getPokemon like as follows.

async function getPokemon(){
    const poke1 = await axios.get('https://pokeapi.co/api/v2/pokemon/1');    console.log(poke1);}

async? await? axios.get()? I know how you feel. Let me explain about those. Async is kind of a symbol to clearly specify that a function controls the pace of executing code. Await is put where the pace, or timing of the execution is controlled. The execution never goes to next of the code with await unless the code is completely processed. Axios.get() is a syntax to get some certain set of data from API through the Internet.

Why do we need async and await? When using API, it usually takes more time than JavaScript code is read because API contains lots of data and the data is obtained through the internet. Thus, if we omit async and await, the execution goes to next line while the previous code, where gets data from API, is still in process. As a result, blank or incomplete data will be stored and an error might occur.

If you call the function created earlier and see the console, you will see an object that contains even some more objects like below.

This is the actual entity that we get from API. We got data from the URL of https://pokeapi.co/api/v2/pokemon/1. What this means is we get data No1(/1) the pokemon database(/pokemon) from PokeAPI(https://pokeapi.co/api/v2). In the console.log(), by putting

console.log(poke1.data.name)

instead of just “poke1”, you can get the name of the pokemon. If you change the URL after v2, you will be able to get another kind of data from PokeAPI. You can play around it as you like.

2.3 Put random pokemon name on the screen

Are you getting used to API? If so, let’s go for a little bit advanced.

First things first, put a button tag, an empty ul tag, and two script tags same as earlier in a HTML file.

<button>Get Random Pokemon</button>
<ul></ul><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>

Next up, put the codes in a js file. If you are familiar with DOM manipulation, I’m pretty sure that you will be able to understand it easily. It is just combination of API and DOM manipulation.

const ul = document.querySelector('ul')
const button = document.querySelector('button')button.addEventListener('click', async () => {
    const num = Math.floor(Math.random() * 101)
    const poke = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`)    const li = document.createElement('li')
    li.innerText = poke.data.name
    ul.appendChild(li)})

Here is what this code does.

First, get ul tag and button tag by querySelector and set an click event.

// Get ul and button tag
const ul = document.querySelector('ul')
const button = document.querySelector('button')// Set a click event for button tag
button.addEventListener('click', async () => {
}

Then, we created a random number and get data of the created number from API.

// Create an integer between 1 and 100
const num = Math.floor(Math.random() * 101// Get a data of random number from API
const poke = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`)

Lastly, create a li tag with a text of the name of randomly picked pokemon and put it inside the ul tag.

const li = document.createElement('li')
li.innerText = poke.data.name
ul.appendChild(li)

Let’s check the result on the screen. You should see a screen with “Get Random Pokemon” button and if you click it, Pokemon’s name will appear on the screen on by one randomly.

It’s not really fancy but still enough to get a concept of API and actually use it with some DOM manipulation, right?

3. Conculusion

API is very powerful tool in developing website and it save our time of creating whole bunch of necessary data. There are lots more features in API and you might going to be overwhelmed by the deep ocean. But don’t worry, you will definitely get to know more as you use it!

Thank you so much for reading:)