Planet Of The APIs
Tags: beginners, javascript, api, fetch
Published: 2021-07-22 00:26:27

Anytime you use an application on your phone or browse the internet on your desktop/laptop, you're connecting to a server to request for data. The server takes this request, interprets the data, and sends it back to you in a readable way. That's all possible because of APIs. If you stick around until the end, I *promise* to show you how to work with APIs.

![Pokemon Ash Ketchum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le22pgwkffzuj15andpq.png)

When I started my coding journey a few years back, I asked a developer friend what was important for me to know. Apart from having a firm grasp on the language I was learning, he told me I needed to know how to work with APIs. 

***Mark Rafael***, *Technical Lead (Software and Services) at GoPro, "We use private APIs to allow our various applications (web/mobile/cameras) to use the same back end functionality without having to replicate code."*

<br>
#<center>. . .
<br>

#What is an API?
An API (Application Programming Interface) is an interface that allows two pieces of software to communicate. This is implemented by a server and allows a client to make requests by using the **API URL Path**.

```
"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
```

#Why are APIs important?
As developers, our main purpose is to be problem solvers. Luckily for us, many problems have already been solved. If you look at the example API url path above, it's for Google Maps. Now imagine Uber doesn't exist and you just came up with this amazing idea for ride-sharing. Of course you need to implement a mapping system.

![The Office Michael drives into a lake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8sw8ja24lufj7ykf4or.jpeg)

Now you can build one from scratch or you can just pay Google [$58 million](https://www.cnbc.com/2019/04/11/uber-paid-google-58-million-over-three-years-for-map-services.html#:~:text=Uber%20relies%20heavily%20on%20Google,also%20uses%20Google's%20public%20cloud.) to use their API! Ok ok that's a hefty price, but if you're working at the scale of Uber, utilizing Google Map's API not only saves you a lot of time but you know you have a reliable mapping system.

#Seamless Application
According to [Google](https://www.huffpost.com/entry/top-2018-ecommerce-trends-to-watch-for_b_5a1d7d63e4b09413e786af2f), 

*"About 85% of online shoppers start a purchase on one device and finish on another."* 

It's no longer enough to have an easy to navigate website or intuitive mobile application, these need to work together to provide a seamless experience when switching from one device to another. With the speed most APIs deliver data, this seamless experience is possible by making **Fetch()** requests to the API in real-time.

<br>
#<center>. . .
<br>

![My dog Roscoe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8osq2a27r47rurumrapp.jpg)
#Fetch() Request in JS
This good boy is Roscoe. When he's not being a model, he likes to play fetch. Sometimes he won't go after his ball when I throw it, so I have to request him to fetch it, a fetch() request performs the same way. We're asking the client to get us data from the server.

Let's use the free [Star Wars API](https://swapi.dev/) to fetch some data.

```javascript
const baseURL = 'https://swapi.dev/api/'
const peopleURL = 'https://swapi.dev/api/people/1/'
```
Our *baseURL* points to the APIs root URL. We can make requests to the baseURL but to get specific data we will make requests to **Endpoints**. Endpoints are specific points of entries in an API. Our *peopleURL* points to an endpoint.

```javascript
fetch(peopleURL)
  .then(response => response.json())
  .then(data => console.log(data));
```

This is the syntax for making a basic fetch() request in JavaScript. Let's take a look at what we're doing:

```javascript
fetch(peopleURL)
//  .then(response => response.json())
//  .then(data => console.log(data));
```
Here we're telling our client to send a fetch() request to the API URL path that we provided. This won't return us the data we want yet, what this first part gives us is a **Promise**.

![Promise](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bj8lrgqqmdwjm7wb6ky.png)

<!--
![Console log fetch request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9nz0fuhi5te7jb073ki.png)

If we return the fetch() request and display it to the console we can see the promise we get from the server.
-->

A promise represents a response from the server saying, *"I have received your request and am working on resolving it."* This allows our code to be **Asynchronous**, meaning while our application is waiting to receive that data from the server, other tasks can be completed.

![Response object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt8knx13zfriamvdrl8s.png)

Once our promise is resolved, we get a **Response** object.

```javascript
//fetch('https://swapi.dev/api/')
  .then(response => response.json())
//  .then(data => console.log(data));
```

Though it's not yet in a format we can work with so we extract the **JSON** (JavaScript Object Notation) by using the **.json()** method.

```javascript
//fetch('https://swapi.dev/api/')
//  .then(response => response.json())
  .then(data => console.log(data));
```

Then after the JSON is extracted we can finally work with it within our code. Here we're simply displaying it to the console.

![Data from API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2b07w575r23xleu0qjw.png)

And there's our data from our API!

<br>
#<center>. . .
<br>
#Conclusion
This was a very basic definition and example of APIs but I hope it highlights the importance of APIs and how it makes our lives as developers easier. There's also a lot more we can do with APIs than a basic fetch() request and I'll provide some links to more resources below. Happy coding!
<br>
#Resources
[Star Wars API](https://swapi.dev/)
[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
[Third-party APIs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response/json)
[API Endpoint](https://apipheny.io/api-endpoint/)
[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)