DEV Community

Blujay0
Blujay0

Posted on • Edited on

Quick Look: How to Use APIs

Introduction

This article will cover APIs: what they are, what they do, and the simplest way make an API call using the National Park Service API.

What is an API?

An Application Programming Interface, or API for short, is a set of rules used by programs to communicate with each other. It is a vital part of communication between the frontend (client-side) and the backend (server-side).

What do APIs do?

An API facilitates the request-response cycle between the client and the server. A frequently used analogy for this cycle is to think of an API as a waiter in a restaurant that acts as a middleman between the customers and the kitchen. In programming terms, the customer is the client and the kitchen is the backend-server.
Here is a simple example of the cycle:

  • a client makes a request to the API
  • the API processes the request and makes a call to the server
  • the server receives the API call and repsonds with data
  • API processes the data and delivers it to the client

API Access

Not all APIs are open for public use and understandably so. The server-side database may belong to a bank holding sensitive and private information about their customers. It is probably not a good idea to give random people access to this information through an API.
However, there are plenty of APIs that are open for the public to use. Thankfully, lists exist of public APIs and a few links have been added at the bottom of this article in the "References" section.
Some of these public APIs require no authorization while others do. There are different types of authorizations such as an API key or OAuth. This article will focus on using an API key.

Generating an API Key

Before you use make a API call, you need to have one first! We'll using the National Park Service API for this example. Fill out this form on their site and your key will be emailed to you. It will be a mix of letters and numbers in this case. This key acts like your ID card and keeps track of the number of requests you make. Thankfully, NPS allows up to 1,000 requests per hour which is normally more than enough.

Creating a URL to Make the API Request

In order to make a API call/request, the API key needs to be saved in a variable in your JavaScript:

const API_KEY = "your_key_here_in_quotes";
Enter fullscreen mode Exit fullscreen mode

The NPS Documentation will provide you with information on how to format the URL to make the API request. In our case, we just want data about parks so the format would look like this:

const getParks = `https://developer.nps.gov/api/v1/parks?api_key=${API_KEY}`;
Enter fullscreen mode Exit fullscreen mode

NOTE: you can just use the URL as is, but it makes it easier to re-use and makes for cleaner code if we save it to a variable.

Making the API Call with Another API

Now, to actually make the request we need to use the Fetch API. The Fetch API is built into the browser and gives you access to the fetch() method which takes one required arugment. This argument is the path to the data that we are requesting which we have saved in our getParks variable!

fetch(getParks);
Enter fullscreen mode Exit fullscreen mode

Conclusion

This retreives the data you are requesting, but how do we use that data? That is a topic for another article.

References

Top comments (0)