A Beginners Introduction to Making API Requests (Unsplash API)
Tags: beginners, javascript, webdev
Published: 2021-12-21 22:01:30

So if you’ve followed upon the previous post where we discussed about Response, then this article about how to implement request and handle response with the [Unsplash](https://unsplash.com/) API would prove very useful in understanding the two concepts. This article by the way assumes you have a basic knowledge of JavaScript and its core concepts such as: Functions and the JavaScript fetch API. But if you don’t know, just read on, I’ll try to explain the steps as much as possible

![requests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjiav1nblw0dh3h3td1u.jpg)
Now, to make a request in JavaScript, we have a lot of options, we could do an **XHR** request, or we could use a package called **_Axios_** to make a Promise-based request to a web server if you working with a node-generated project. But for the sake of simplicity in this article, we would be using the JavaScript `fetch` API. The Fetch API basically allows us to make HTTP requests to web servers. We could use Fetch on its own to make a request to our API and then tackle on the response using a `.then()` function, or we could use a cleaner method of wrapping our Fetch in an `async` function. Nevertheless, this article is not focused on teaching you how to write `async` functions, rather how to use it to make our requests easier with Fetch.

Having talked at length about making requests to an **API** using Fetch, you may wonder what an API exactly is: In short an API (Application Programming Interface) is any standard interface or endpoint that facilitates connection to a web server. In this article we would be making a simple request to [Unsplash](https://unsplash.com/) API. Unsplash is a web platform that acts as a repository of high quality free images, hence, their API enables us to make requests to their central server for an image, which would in turn make a response to us.

**Making a Request:**
To get started, quickly scaffold a simple index.html project on your PC. It should look something similar to this:

![scaffold image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzogmg3pttxj5wto2whs.png)
So at the script section of our project we are going to create two things: a fetch request without the async function as a wrapper and also a fetch request with the wrapper. This way we can get a knowledge of both worlds:


![requests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wdsc0hi4v43a1oxc34j.png)
Now looking closely, the _searchTerm_ and the _accessKeys_ are two variables that would help our API below them function optimally. **Access Keys are private hence endeavor to keep them hidden!**
In fetch without async wrapper above, we use the fetch to make a GET request to a server(Unsplash) via an API, this request is then tackled on using the `.then()` methods. The first one parses the response gotten from the server (res), converting it to a more usable “JSON” format; This enables us to access the response the same way we would with a JavaScript objects. Also, the second `.then()` method grabs the parsed data and outputs it on our browsers console.
The `async` function too also helps in making asynchronous requests, how so: a response is expected and upon getting the response the data is stored in a constant called – res. Next we await the response to be parsed into a **JSON** format, after resolving it is passed to a constant – data.
One thing to note is that these operations occur in a non-blocking manner, they execute sequentially such that the fetch must run/execute and get a response before the response is then parsed, after which we then output or use the parsed data. Such is the nature of asynchronous JavaScript.
If you’ve followed this article properly, you should come to the understanding of not the syntax for making a GET request to an API using fetch, but rather of how making requests asynchronously works in JavaScript. Handling Responses and using them on our page is also vital to understand. _The part2_ of this article series would explain not only how to handle and use responses but also how to structure our requests to catch and handle errors too, should they occur. Happy Learning!