Sending HTTP Requests With Axios

When I first learned how to make requests to a server using the fetch API, my first reaction was that the code felt clunky. In order to complete a request-response cycle, the .json() method is required after the initial call. Moreover, depending on the type of request you are sending, you may be required to attach additional headers and other attributes in order to return correctly-formatted data.

While fetch is a perfectly acceptable method to use, the reason I immediately switched to Axios.js was primarily because of how clean and efficient it made my code look. I no longer need the .json() method to parse my data, and it’s much easier to identify what types of requests I am making at a quick glance. In this article, we will walk through the main steps to utilizing Axios!

Make a GET request to the Chuck Norris API

Set Up Axios

Axios is a promise-based library and can be used with Node.js or in your browser. Unlike fetch however, in order to start using it, first we need to install it. There are several ways to do this.

Type the following command into your terminal to install Axios.

npm install axios

Installing with yarn also works.

yarn add axios

My personal approach is to simply include the Axios script tag in my HTML file. Be sure to place it above your main JS file.

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

Get The Joke

With Axios installed on our local machine, let’s take a look at how we make a GET request. We are going to use the following URL from the Chuck Norris app to send our HTTP request:

GET https://api.chucknorris.io/jokes/random

If we use fetch to achieve this, it might look like this:

Using the fetch API

We’re not sure what we want to do with this data yet so let’s just console.log the JSON data we get back. However, with a simple GET request, Axios allows us to shorten our code up a bit more. Let’s try sending the same request to the Chuck Norris API with Axios:

Making the same request with Axios

First we write the axios keyword in place of fetch, followed by the method of what type of HTTP request we want. Inside our .then() block, we pass in the response we receive. What happened to the .json() method? What happens when we console.log(res.data)?

It turns out, the initial response we get back from the server already has access to the data method inside the promise! By simply using .data after our response variable (res), we get back a random JSON from the API containing our Chuck Norris fact.

{
 “categories”: [
 
 ],
 “created_at”: “2020–01–05 13:42:23.240175”,
 “icon_url”: “https://assets.chucknorris.host/img/avatar/chuck-norris.png",
 “id”: “A1ki2T9hRU-LUhPdgRYOsQ”,
 “updated_at”: “2020–01–05 13:42:23.240175”,
 “url”: “https://api.chucknorris.io/jokes/A1ki2T9hRU-LUhPdgRYOsQ",
 “value”: “Chuck Norris’ best man at his first wedding was Chuck Norris from 5 years in the future. All nine bridesmaids were Norris’ future ex-wives.”
}

If you look back at the two blocks of code with fetch and Axios, there is not THAT much of a difference which makes using Axios all the more convenient if you’re comfortable with fetch. Although the size of the .fetch() request isn’t that much bigger, the Axios block provides us with a much easier way to define the request type and receive the data without having to parse it.

With access to the .data method, we can perform further additional implementations with ease. If we had a function such as creating an element containing a Chuck Norris fact on our page using DOM, Axios keeps our code clean and simple.

Post Something New

Let’s say we were creating a simple app that allowed users to post their own Chuck Norris facts to the database. Once the form is submitted, we would need to send a POST request to add our new fact to the database.

Form for writing a new Chuck Norris joke

Imagine that instead of using the official Chuck Norris API, we just happen to have access to the same database inside our local project. If we send a request to localhost:3000/jokes/random, we should get back the same JSON as before when we used https://api.chucknorris.io/jokes/random.

In order to create and store a new fact (or joke, let’s be honest), we can use the .post() method with Axios. A handlePost() method is also necessary in order to prevent the form element’s default event and to pass in an appropriate object for the HTTP request.

In handlePost(e), we take care of the form event listener and pass in an object for POST

Unlike with fetch, there is no need to explicitly state the method, headers, or body inside the object passed to the POST request (although you still can just as easily). Regardless of the action, Axios makes every request we send look cleaner and more organized. With the help of the await keyword, we are able to move our HTTP request-response to a single line in our function!

Conclusion

There is no obvious technical advantage to choosing a particular HTTP request API, although many developers will favor one over the others. Libraries such as Axios simply provide us with some added syntactic sugar for making those requests.

There are many other methods we can utilize with Axios apart from GET and POST requests, and as you explore more of its functionality for yourself, be sure to ALWAYS reference the documentation that can be found on Github!