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 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
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 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:
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:
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!
Top comments (0)