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

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

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

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 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!

I am currently a student in the software engineering program at Flatiron school

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store