Axios is an open-source library for making asynchronous HTTP requests to REST endpoints in the browser and Node.js. It is a promise-based HTTP client that can be used in plain JavaScript as well as in modern JavaScript frameworks like React, Angular and Vue.js, etc.

In this tutorial, we will be using Axios in a JavaScript and HTML5 project. Let's create a new HTML5 project:

# create and switch to new directory
$ mkdir axios-js && cd axios-js

# create files
$ touch index.html script.js

# open the project in VS Code
$ code .

Installation

Adding Axios to the HTML5 project is easy. You can either use the npm package manager or Content Delivery Network (CDN). If you prefer to use the npm package manager, run the following command in your terminal:

$ npm install axios --save

It will download the library in the node_modules folder from where you can add it your project:

<script src="./node_modules/axios/dist/axios.min.js"></script>

The easiest way to include Axios is by using external CDN:

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

User Interface

Let us update our index.html file to display a list of users:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Axios in JavaScript</title>
    </head>
    <body>
        <div>
            <h1>Users</h1>
            <ul></ul>
        </div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

For running the project, we will be using http-server - a simple, zero-configuration command-line HTTP server:

$ http-server -p 3000

Now you can visit http://localhost:3000 to view your project.

GET Request

Let us create a new function in the script.js file to fetch a list of users using the GET request. We will use Reqres REST API for all our examples.

script.js

const fetchUsers = () => {
    axios.get('https://reqres.in/api/users')
        .then(response => {
            const users = response.data.data;
            console.log(`GET list users`, users);
        })
        .catch(error => console.error(error));
};

fetchUsers();

If you have used jQuery before, understanding the axios.get() function is easy. We just pass the URL of the endpoint as a parameter to this method. The method returns a promise, allowing us to use then() and catch() methods to handle the result.

When the promise is resolved successfully, you will get a response object back. This object has information about the response such as headers, data, config, status and even complete request object.

Now let us extend our script.js file and add a new function which parses the users object and add it to DOM:

script.js

const createLi = (user) => {
    const li = document.createElement('li');
    // add user details to `li`
    li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;
    return li;
};

const appendToDOM = (users) => {
    const ul = document.querySelector('ul');
    //iterate over all users
    users.map(user => {
        ul.appendChild(createLi(user));
    });
};

const fetchUsers = () => {
    axios.get('https://reqres.in/api/users')
        .then(response => {
            const users = response.data.data;
            console.log(`GET list users`, users);
            // append to DOM
            appendToDOM(users);
        })
        .catch(error => console.error(error));
};

fetchUsers();

POST Request

We can add a new user to our REST API with axios.post() method. Just add a new function createUsers() inside of script.js:

const createUser = (user) => {
    axios.post('https://reqres.in/api/users', user)
        .then(response => {
            const addedUser = response.data;
            console.log(`POST: user is added`, addedUser);
            // append to DOM
            appendToDOM([addedUser]);
        })
        .catch(error => console.error(error));
};

To create a new user, you need to add a <form> inside index.html file to capture user information:

<div id="create-user">
    <h1>Create User</h1>
    <form>
        <input type="text" id="first_name" placeholder="Enter First Name">
        <input type="text"  id="last_name" placeholder="Enter Last Name">
        <button type="submit">Add User</button>
    </form>
</div>

Now add an event listener for form submission to create a new user:

const form = document.querySelector('form');

const formEvent = form.addEventListener('submit', event => {
    event.preventDefault();

    const first_name = document.querySelector('#first_name').value;
    const last_name = document.querySelector('#last_name').value;

    const user = { first_name, last_name };
    createUser(user);
});

DELETE Request

Axios provides axios.delete() method to make a DELETE request. Let's add delete feature to our users list. First of all, create a new function deleteUser() inside of script.js:

const deleteUser = (elem, id) => {
    axios.delete(`https://reqres.in/api/users/${id}`)
        .then(response => {
            console.log(`DELETE: user is removed`, id);
            // remove elem from DOM
            elem.remove();
        })
        .catch(error => console.error(error));
};

Now update the createLi() method to attach an onclick event which handles the removal of the user when clicked:

const createLi = (user) => {
    const li = document.createElement('li');
    // add user details to `li`
    li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;

    // attach onclick event
    li.onclick = e => deleteUser(li, user.id); 

    return li;
};

Source code: Download the complete source code from GitHub available under MIT license.

Summary

Axios is a simple-to-use HTTP client library that allows us to easily send asynchronous HTTP requests to REST endpoints and perform CRUD operations. If you want to learn more about Axios, check out the guides on Axios in Node.js and Node.js HTTP client libraries.

If you have any questions or feedback, please feel free to send me a tweet anytime.

Happy Coding 😍

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also Subscribe to RSS Feed.

Last Updated: