Axios is an open source library that allows you to make HTTP requests. It provides methods that include .get()
, .post()
, and .delete()
.
In this article, you will build a JavaScript application that uses Axios to perform GET
, POST
, and DELETE
requests to a server for updates to a list of todo items.
To complete this tutorial, you’ll need:
This tutorial was verified with Node v15.11.0, npm
v7.6.1, axios
v0.21.1, and parcel-bundler
v1.12.5.
In this section, you will create a new project directory, install package dependencies, and establish configuration files.
First, create a new project directory:
- mkdir axios-js-example
Then, change into the new project directory:
- cd axios-js-example
Next, initialize a new npm
project:
- npm init -y
Then, install Axios:
- npm install axios@0.21.1
Note: Axios can also be added via a CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Parcel is a tool to bundle and serve code. Install parcel-bundler
as a dev dependency:
- npm install parcel-bundler@1.12.5 --save-dev
At this point, you will have a new project with axios
and parcel-bundler
.
Next, open package.json
in your code editor. And modify the "scripts"
to execute parcel
for dev
and build
:
{
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel index.html",
"build": "parcel build index.html"
}
// ...
}
Then, create a new app.js
file. And add the following lines of code to avoid a “regeneratorRuntime is not defined
” error when using await
and async
:
import 'regenerator-runtime/runtime';
import axios from 'axios';
Next, create a new index.html
file. And add the following lines of code:
<!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;
margin: 0;
padding: 0;
}
li {
margin-bottom: .5em;
margin-top: .5em;
padding: 1em;
border: 1px solid white;
transition-property: background-color, color;
transition-duration: 500ms;
transition-timing-function: ease-in-out;
}
li:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div>
<h1>Todos</h1>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
This code will create an unordered list of todo items. Presently, this list will be empty, but it will be populated later.
Now, verify that your project is working up to this point. Open your terminal and run the following command:
- npm run dev
Then navigate to http://localhost:1234/
with your browser. You will observe a screen that says Todos
.
GET
RequestIn this section, you will construct a function to utilize Axios to perform a GET
HTTP request to the JSON Placeholder API.
Open app;js
in your code editor. And add the following lines of code:
// ...
const BASE_URL = 'https://jsonplaceholder.typicode.com';
const getTodoItems = async () => {
try {
const response = await axios.get(`${BASE_URL}/todos?_limit=5`);
const todoItems = response.data;
console.log(`GET: Here's the list of todos`, todoItems);
return todoItems;
} catch (errors) {
console.error(errors);
}
};
Notice how axios.get
is passed a path constructed out of the BASE_URL
and a "todos"
string. A _limit
parameter is will restrict the response to 5
items.
This method will provide a response
object back. This includes information about the response including things like headers
, status
, config
, and most importantly, data
.
Next, add code to create a todo element and append the todo elements to the list:
// ...
const createTodoElement = item => {
const todoElement = document.createElement('li');
todoElement.appendChild(document.createTextNode(item.title));
return todoElement;
};
const updateTodoList = todoItems => {
const todoList = document.querySelector('ul');
if (Array.isArray(todoItems) && todoItems.length > 0) {
todoItems.map(todoItem => {
todoList.appendChild(createTodoElement(todoItem));
});
} else if (todoItems) {
todoList.appendChild(createTodoElement(todoItems));
}
};
const main = async () => {
updateTodoList(await getTodoItems());
};
main();
Save your changes and view your application in the browser. You will observe a list with five items.
POST
RequestIn this section, you will construct a form
and input
to capture information for new todo items to add to the list. It will utilize Axios to perform a POST
HTTP request.
Open index.html
in your code editor. And add the following lines of code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<style>
/* ... */
#new-todos form {
margin-bottom: .5em;
margin-top: .5em;
padding: 1em;
border: 1px solid white;
}
</style>
</head>
<body>
<div id="new-todos">
<h1>New Todo</h1>
<form>
<label>
Name
<input type="text" id="new-todos__title" />
</label>
<button type="submit">Add</button>
</form>
</div>
<div>
<h1>Todos</h1>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
Next, open app.js
in your code editor. And add the following lines of code:
// ...
const form = document.querySelector('form');
form.addEventListener('submit', async event => {
event.preventDefault();
const title = document.querySelector('#new-todos__title').value;
const todo = {
userId: 1,
title: title,
completed: false
};
const submitTodoItem = await addTodoItem(todo);
updateTodoList(submitTodoItem);
});
This code will take the value from the form and create a todo object.
Next, you will need to define the addTodoItem
function inside of app.js
:
// ...
export const addTodoItem = async todo => {
try {
const response = await axios.post(`${BASE_URL}/todos`, todo);
const newTodoItem = response.data;
console.log(`Added a new Todo!`, newTodoItem);
return newTodoItem;
} catch (errors) {
console.error(errors);
}
};
Notice how axios.post
is passed a path and a payload containing the todo item.
Save your changes and view your application in the browser. You will observe a list with five items and a form. After using the form to add a new todo item, the list will update to display six items.
DELETE
RequestIn this section, you will create a click event on existing todo items to remove them from the list. It will utilize Axios to perform a DELETE
HTTP request.
Next, you will need to define the deleteTodoItem
function inside of app.js
:
// ...
export const deleteTodoItem = async id => {
try {
const response = await axios.delete(`${BASE_URL}/todos/${id}`);
console.log(`Deleted Todo ID: `, id);
return response.data;
} catch (errors) {
console.error(errors);
}
};
Notice how axios.delete
is passed a path that includes the id
for the todo item:
Next, create a removeTodoElement
function:
// ...
const removeTodoElement = async (event, element) => {
event.target.parentElement.removeChild(element);
const id = element.id;
await deleteTodoItem(id);
};
This code will remove the element from the DOM and then call deleteTodoItem
with the id
.
Now, scroll back up to the createTodoElement
function. You will add two new lines of code. When the list item element is created, you will also add an onclick
event to the element to delete it. It will take the item id
and pass it to removeTodoElement
which in turn will call deleteTodoItem
:
// ...
const createTodoElement = item => {
const todoElement = document.createElement('li');
todoElement.id = item.id;
todoElement.appendChild(document.createTextNode(item.title));
todoElement.onclick = async event => await removeTodoElement(event, todoElement);
return todoElement;
};
// ...
Save your changes and view your application in the browser. You will observe a list with five items and a form. After using the form to add a new todo item, the list will update to display six items. After clicking on one of the todo items, the list will display five items.
In this article, you built a JavaScript application that uses Axios to perform GET
, POST
, and DELETE
requests to a server for updates to a list of todo items.
If you’d like to learn more about Axios, check out the guides on React with Axios and Vue with Axios.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Thank you so much.