Axios is an open source library that allows us to easily make HTTP requests. It’s effectively just fetch with extra superpowers!
Let’s see this in action by creating a new HTML5 project:
# Create directory with a name of your choosing
$ mkdir axios-js && cd axios-js
# Create files
$ touch index.html app.js
# Initialise a new npm project
$ npm init -y
# Install Axios
$ npm i axios -S
$ npm i parcel-bundler -D
# Open this up in your editor
$ code .
NOTE: Axios can also be added via a CDN like so: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
As you may be able to see from our npm install calls, we’ll be using Parcel to bundle and serve our code. We can add an npm script for this by heading over to package.json:
{
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
}
As we’ll be using async and await inside of our project, we’ll install Babel and the @babel/polyfill package:
$ npm i @babel/core @babel/polyfill
Start your project by running npm run dev in your terminal and navigate to http://localhost:1234/. We can then update index.html with our app.js and some minor semantics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vanilla Axios</title>
<style>
body {
background-color: #673AB7;
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div>
<h1>Todos</h1>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
GET
Inside of app.js, let’s make a function that allows us to GET Todos from an API. We’ll be using the JSON Placeholder API for our example.
import axios from 'axios';
const BASE_URL = 'https://jsonplaceholder.typicode.com';
const getTodos = async () => {
try {
const res = await axios.get(`${BASE_URL}/todos`);
const todos = res.data;
console.log(`GET: Here's the list of todos`, todos);
return todos;
} catch (e) {
console.error(e);
}
};
Axios almost makes it almost too simple to get data from a server, which is great news for us. Simply pass axios.get the BASE_URL and you’ll get a response object back.
This includes information about our response including things like headers, status, config and most importantly, data.
We can extend our application to now add this data to the DOM:
const createLi = item => {
const li = document.createElement('li');
li.appendChild(document.createTextNode(item.title));
return li;
};
const addTodosToDOM = todos => {
const ul = document.querySelector('ul');
if (Array.isArray(todos) && todos.length > 0) {
todos.map(todo => {
ul.appendChild(createLi(todo));
});
} else if (todos) {
ul.appendChild(createLi(todos));
}
};
const main = async () => {
addTodosToDOM(await getTodos());
};
main();
POST
We can add Todos to our API by capturing some information about it inside of a form and input:
<div id="new-todos">
<h1>New Todo</h1>
<form>
<label>
Name
<input type="text" id="new-todos__name" />
</label>
<label>
userId
<input type="text" id="new-todos__userId" />
</label>
<button type="submit">Add</button>
</form>
</div>
We can then add the Todo by listening for the submit event:
const form = document.querySelector('form');
const formEvent = form.addEventListener('submit', async event => {
event.preventDefault();
const title = document.querySelector('#new-todos__title').value;
const userId = document.querySelector('#new-todos__userId').value;
const todo = {
title,
userId
};
const addedTodo = await addTodo(todo);
addTodosToDOM(addedTodo);
});
We’ll need to create the addTodo function inside of app.js. The major difference between this and the get example is that we’re adding the todo payload.
export const addTodo = async todo => {
try {
const res = await axios.post(`${BASE_URL}/todos`, todo);
const addedTodo = res.data;
console.log(`Added a new Todo!`, addedTodo);
return addedTodo;
} catch (e) {
console.error(e);
}
};
DELETE
What good is a Todo list if we can’t delete items? Let’s add that functionality. We can create a deleteTodo function inside of app.js:
export const deleteTodo = async id => {
try {
const res = await axios.delete(`${BASE_URL}/todos/${id}`);
console.log(`Deleted Todo ID: `, id);
return res.data;
} catch (e) {
console.error(e);
}
};
Within our createLi function we can attach an onclick event which handles the removal of our Todo when it’s clicked. The DELETE method requires an id to be passed as a parameter, so we can also add an id to each element at this stage.
const createLi = item => {
const li = document.createElement('li');
li.id = item.id;
li.appendChild(document.createTextNode(item.title));
// Remove LI on click
li.onclick = async e => await removeTodo(e, li);
return li;
};
Inside of removeLi we can remove the Todo from the DOM and then call deleteTodo with the ID:
const removeTodo = async (e, li) => {
e.target.parentElement.removeChild(li);
const id = li.id;
await deleteTodo(id);
};
Summary
This article looked at a few of the key ways to interact with an API using Axios using a very simple Todo application. If you’d like to learn more about Axios, check out the guides on React + Axios and Vue + Axios.