What is Axios

Axios is defined as a JavaScript library used to simplify HTTP requests, enabling seamless communication between client-side applications and servers. It is built on promises and provides an easy-to-use interface for fetching, sending, and managing data over RESTful APIs. Axios is widely appreciated for its ability to handle asynchronous requests, manage errors effectively, and support features like automatic JSON data transformation.

Unlike the native fetch API, Axios offers advanced capabilities such as request cancellation, timeout settings, and response interceptors, making it a preferred tool for developers building dynamic and interactive web applications.

For example, if you want to fetch data from a public API, Axios makes it simple, and straightforward. More information can be found at:

• Axios Documentation
• What is Axios
• Axios, A Comprehensive Guide

Axios Installation

As described in the documentation, there are many ways to install Axios. The method we are going to use, and probably the simplest, is the CDN install which requires that you add a <script> link (found here), to the bottom of your HTML page, just like a regular JavaScript link. At the time of this writing, the <script> code is:

• <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Axios Usage

In our discussions on XHR Requests, and Fetch Requests, we were using the Star Wars API to request data for different people within the Star Wars universe.

We are going to be doing the same here, only we are going to be using Axios to simplify the coding, and the process.

Once again, we are going to be requesting the data for three different Star Wars people. This time we'll using 3 / 5 / 7 to select our people. We'll then log the results to the console. Here is the code:

• JavaScript
• // assign a variable to output the results to a <div> at the bottom of the page
• const swPeople = document.getElementById('swPeople');
•  
• // async function to send request
• const getStarWarsPeople = async (id) => {
  • // if successful request
  • try {
    • const res = await axios.get(`https://swapi.tech/api/people/${id}/`);
    • console.log(res.data.result.properties);
    • swPeople.innerHTML +=`Star Wars person #${id} : ${res.data.result.properties.name}<br>`;
  • // log any errors that occurred on the request
  • } catch () {
    • console.log("ERROR!!!", e);
  • }
• };
•  
• // for loop to run requests for 3 / 5 / 7
• for (let i = 3; i < 8; i = i + 2) {
  • getStarWarsPeople(i);
• }

We can clearly see that this is a much simplified coding, from the previous XHR, and Fetch requests. For starters, Axios returns a Json Object which save us a step right there.

With Fetch, the initial request returned a Promise. We had to wait for that resolution, then we had to use res.JSON() to break down the body: readable stream to then log the res.data.result.properties, which gave us the actual data we requested.

Using Axios, we simply request the data, and axios does the Json conversion for us. All we had to do was log the results of res.data.result.properties to the console. One step and done.

And our Results for Star Wars persons 3 / 5 / 7 is: