Axios is a promise-based HTTP Client Javascript library for Node.js and Browser. In this tutorial, we will create examples that use Axios to make Get/Post/Put/Delete request. The final section shows a simple Axios HTTP Client to interact with Rest API.
Related Posts:
– Axios File Upload example
– Axios Interceptors tutorial with Refresh Token example
– Javascript Fetch API tutorial: Get/Post/Put/Delete example
– React Axios example – Get/Post/Put/Delete with Rest API
– React Query and Axios example with Rest API
– Vue Axios example – Get/Post/Put/Delete with Rest API
Contents
- Axios Features
- Install Axios
- Axios Response Object schema
- Axios Response Body
- Axios Error handling
- Axios Error handling with async-await
- Axios GET request
- Axios GET with params
- Axios GET with headers
- Axios GET with params and headers
- Axios POST with body
- Axios POST with headers
- Axios PUT request
- Axios PUT with headers
- Axios DELETE request
- Axios DELETE with headers
- Create Axios instance
- Axios Request example with Rest API
- Source Code
- Conclusion
- Further Reading
Axios Features
Axios can run in the Node.js and Browser with the same codebase.
– On the server-side it uses the native Node.js http
module
– On the client-side (browser) it uses XMLHttpRequests
Additionally, there are important features that you should know:
- Supports the Promise API
- Intercept request and response (Axios Interceptors tutorial)
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
(from https://github.com/axios/axios#features)
Install Axios
We can add Axios to our project/code with one of following simple ways:
– npm:
npm install axios
– bower:
bower install axios
– yarn:
yarn add axios
– CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Or:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios Response Object schema
The response for a Axios request contains:
data
: parsed response body provided by the serverstatus
: HTTP status codestatusText
: HTTP status messageheaders
: HTTP headers (lower case)config
: the request config that was provided toaxios
request
: the last client request instance that generated this response
For example:
{
"data": {
"id": 1,
"title": "Axios Request",
"description": "Tut#1 Description",
"published": true
},
"status": 200,
"statusText": "OK",
"headers": {
"content-length": "162",
"content-type": "application/json; charset=utf-8"
},
"config": {
"url": "/tutorials/1",
"method": "get",
"headers": {
"Accept": "application/json, text/plain, */*"
},
"baseURL": "http://localhost:8080/api",
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1
}
}
Axios Response Body
Axios Response Object has data
field that contains the parsed response body.
We can use then
or await to receive the response body as follows:
axios.get('/bezkoder.com/tutorials')
.then(function (response) {
console.log(response.data);
});
const { data } = await axios.get(url);
Axios Error handling
We use catch()
for handling errors.
axios.get('/bezkoder.com/tutorials')
.then(...)
.catch(function (error) {
if (error.response) { // get response with a status code not in range 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) { // no response
console.log(error.request);
// instance of XMLHttpRequest in the browser
// instance ofhttp.ClientRequest in node.js
} else { // Something wrong in setting up the request
console.log('Error', error.message);
}
console.log(error.config);
});
Axios Error handling with async-await
If you want to use async-await, just wrap the axios call with try/catch block.
async function getTutorial() {
try {
const response = await axios.get('/bezkoder.com/tutorials');
console.log(response);
} catch (error) {
if (error.response) { // get response with a status code not in range 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) { // no response
console.log(error.request);
} else { // Something wrong in setting up the request
console.log('Error', error.message);
}
console.log(error.config);
}
}
Axios GET request
axios.get('/bezkoder.com/tutorials')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
Async/await:
async function getTutorial() {
try {
const response = await axios.get('/bezkoder.com/tutorials');
console.log(response);
} catch (error) {
console.error(error);
}
}
Axios GET with params
You can use the params
config option to set query string params.
axios.get(
'/bezkoder.com/tutorials',
{
params: {
title: 'ios'
}
}
);
And this is equivalent:
axios.get('/tutorials?title=ios');
Axios GET with headers
To send Axios GET request with Headers, we pass an option object with headers
property.
axios.get(
'/bezkoder.com/tutorials',
{
headers: {
'x-access-token': 'token-value'
}
}
);
Axios GET with params and headers
We can merge params
and headers
in a Axios GET request like this.
axios.get(
'/bezkoder.com/tutorials',
{
params: {
title: 'ios'
},
headers: {
'x-access-token': 'token-value'
}
}
);
Axios POST with body
You can perform an Axios POST object request with body
as second parameter.
axios.post(
'/bezkoder.com/tutorials',
{
title: title,
description: description,
}
);
Axios POST with headers
To send Axios POST request with Headers, we pass an option object with headers
property right after the body
.
await axios.post(
'/bezkoder.com/tutorials',
{
title: title,
description: description,
},
{
headers: {
"x-access-token": "token-value",
},
}
);
Axios PUT request
You can perform an Axios PUT json object request with body
as second parameter.
axios.put(
'/bezkoder.com/tutorials/42',
{
title: title,
description: description,
published: true,
}
);
Axios PUT with headers
To send Axios PUT request with Headers, we pass an option object with headers
property right after the body
.
axios.put(
'/bezkoder.com/tutorials/42',
{
title: title,
description: description,
published: true,
},
{
headers: {
"x-access-token": "token-value",
},
}
);
Axios DELETE request
axios.delete('/bezkoder.com/tutorials/42');
Axios DELETE with headers
To send Axios DELETE request with Headers, we pass an option object with headers
property.
axios.delete(
'/bezkoder.com/tutorials/42',
{
headers: {
"x-access-token": "token-value",
},
}
);
Create Axios instance
We can create a new instance of axios using axios.create(config)
method.
const instance = axios.create({
baseURL: 'https://bezkoder.com/api/',
timeout: 2000,
headers: {'X-Custom-Header': 'bezkoder'}
});
Axios Request example with Rest API
We will build a HTTP Client to make CRUD requests to Rest API in that:
- Axios GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title
- Axios POST request: create new Tutorial
- Axios PUT request: update an existing Tutorial
- Axios DELETE request: delete a Tutorial, delete all Tutorials
This Axios Client works with the following Web API:
Methods | Urls | Actions |
---|---|---|
POST | /api/tutorials | create new Tutorial |
GET | /api/tutorials | retrieve all Tutorials |
GET | /api/tutorials/:id | retrieve a Tutorial by :id |
PUT | /api/tutorials/:id | update a Tutorial by :id |
DELETE | /api/tutorials/:id | delete a Tutorial by :id |
DELETE | /api/tutorials | delete all Tutorials |
GET | /api/tutorials?title=[keyword] | find all Tutorials which title contains keyword |
You can find step by step to build a Server like this in one of these posts:
- Express, Sequelize & MySQL
- Express, Sequelize & PostgreSQL
- Express, Sequelize & SQL Server
- Express & MongoDb
- Spring Boot & MySQL
- Spring Boot & PostgreSQL
- Spring Boot & MongoDB
- Spring Boot & SQL Server
- Spring Boot & H2
- Spring Boot & Cassandra
- Spring Boot & Oracle
- Django & MySQL
- Django & PostgreSQL
- Django & MongoDB
Access-Control-Allow-Origin: *
.It helps the REST APIs can be accessed by any origin.
– Create a Tutorial using axios POST request:
– Retrieve all Tutorials using axios GET request:
– Retrieve a Tutorial by Id using axios GET request:
– Find Tutorials by title using axios GET request with params:
– Update a Tutorial using axios PUT request:
– Delete Tutorial using axios DELETE request:
Source Code
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Axios Requests example</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container my-3" style="max-width: 600px">
<h3>Axios Requests example</h3>
<div class="card mt-3">
<div class="card-header">Axios GET Request - BezKoder.com</div>
<div class="card-body">
<div class="input-group input-group-sm">
<button class="btn btn-sm btn-primary" onclick="getAllData()">Get All</button>
<input type="text" id="get-id" class="form-control ml-2" placeholder="Id">
<div class="input-group-append">
<button class="btn btn-sm btn-primary" onclick="getDataById()">Get by Id</button>
</div>
<input type="text" id="get-title" class="form-control ml-2" placeholder="Title">
<div class="input-group-append">
<button class="btn btn-sm btn-primary" onclick="getDataByTitle()">Find By Title</button>
</div>
<button class="btn btn-sm btn-warning ml-2" onclick="clearGetOutput()">Clear</button>
</div>
<div id="getResult"></div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">Axios POST Request - BezKoder.com</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" id="post-title" placeholder="Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="post-description" placeholder="Description">
</div>
<button class="btn btn-sm btn-primary" onclick="postData()">Post Data</button>
<button class="btn btn-sm btn-warning" onclick="clearPostOutput()">Clear</button>
<div id="postResult"></div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">Axios PUT Request - BezKoder.com</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" id="put-id" placeholder="Id">
</div>
<div class="form-group">
<input type="text" class="form-control" id="put-title" placeholder="Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="put-description" placeholder="Description">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="put-published">
<label class="form-check-label" for="put-published">Publish</label>
</div>
<div class="form-group mt-2">
<button class="btn btn-sm btn-primary" onclick="putData()">Update Data</button>
<button class="btn btn-sm btn-warning" onclick="clearPutOutput()">Clear</button>
</div>
<div id="putResult"></div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">Axios DELETE Request - BezKoder.com</div>
<div class="card-body">
<div class="input-group input-group-sm">
<button class="btn btn-sm btn-danger" onclick="deleteAllData()">Delete All</button>
<input type="text" id="delete-id" class="form-control ml-2" placeholder="Id">
<div class="input-group-append">
<button class="btn btn-sm btn-danger" onclick="deleteDataById()">Delete by Id</button>
</div>
<button class="btn btn-sm btn-warning ml-2" onclick="clearDeleteOutput()">Clear</button>
</div>
<div id="deleteResult"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
const instance = axios.create({
baseURL: "http://localhost:8080/api",
headers: {
"Content-Type": "application/json",
},
});
function htmlizeResponse(res) {
return `<div class="alert alert-secondary mt-2" role="alert"><pre>` + JSON.stringify(res, null, 2) + "</pre></div>";
}
async function getAllData() {
let resultElement = document.getElementById("getResult");
resultElement.innerHTML = "";
try {
const res = await instance.get("/tutorials");
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
async function getDataById() {
let resultElement = document.getElementById("getResult");
resultElement.innerHTML = "";
const id = document.getElementById("get-id").value;
if (id) {
try {
const res = await instance.get(`/tutorials/${id}`);
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
}
async function getDataByTitle() {
let resultElement = document.getElementById("getResult");
resultElement.innerHTML = "";
const title = document.getElementById("get-title").value;
if (title) {
try {
// const res = await instance.get(`/tutorials?title=${title}`);
const res = await instance.get("/tutorials", {
params: {
title: title
}
});
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
}
async function postData() {
let resultElement = document.getElementById("postResult");
resultElement.innerHTML = "";
const title = document.getElementById("post-title").value;
const description = document.getElementById("post-description").value;
try {
const res = await instance.post("/tutorials", {
title: title,
description: description,
});
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
async function putData() {
let resultElement = document.getElementById("putResult");
resultElement.innerHTML = "";
const id = document.getElementById("put-id").value;
const title = document.getElementById("put-title").value;
const description = document.getElementById("put-description").value;
const published = document.getElementById("put-published").checked;
try {
const res = await instance.put(`/tutorials/${id}`, {
title: title,
description: description,
published: published
});
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
async function deleteAllData() {
let resultElement = document.getElementById("deleteResult");
resultElement.innerHTML = "";
try {
const res = await instance.delete("/tutorials");
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
async function deleteDataById() {
let resultElement = document.getElementById("deleteResult");
resultElement.innerHTML = "";
const id = document.getElementById("delete-id").value;
try {
const res = await instance.delete(`/tutorials/${id}`);
const result = {
status: res.status + "-" + res.statusText,
headers: res.headers,
data: res.data,
};
resultElement.innerHTML = htmlizeResponse(result);
} catch (err) {
resultElement.innerHTML = htmlizeResponse(err);
}
}
function clearGetOutput() {
document.getElementById("getResult").innerHTML = "";
}
function clearPostOutput() {
document.getElementById("postResult").innerHTML = "";
}
function clearPutOutput() {
document.getElementById("putResult").innerHTML = "";
}
function clearDeleteOutput() {
document.getElementById("deleteResult").innerHTML = "";
}
Conclusion
With this Axios tutorial, you’ve known many ways to make GET/POST/PUT/DELETE request using Axios (with headers, params, body…). You can also use it in:
– React App: React Axios example – Get/Post/Put/Delete with Rest API
Or: React Query and Axios example with Rest API
– Vue App: Vue Axios example – Get/Post/Put/Delete with Rest API
Furthermore, you can apply it in one of following React/Vue CRUD applications:
- React CRUD example with Axios & React Router
- React Redux CRUD example with Axios & React Router
- Vue 2 CRUD Application with Axios & Vue Router
- Vue 3 CRUD example with Axios & Vue Router
If you want to use Fetch API instead, please visit:
Javascript Fetch API tutorial: Get/ Post/ Put/ Delete example
Happy Learning! See you again.
Further Reading
- https://github.com/axios/axios
- Axios File Upload example
- Axios Interceptors tutorial with Refresh Token example
Please Help me !!!!!!!!!!!!!
When I will run this const res = await instance.get(`/list/single/${id}`);
Error is :-
Access to XMLHttpRequest at ‘http://127.0.0.1:8000/list/single/:id’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Hi, you need to configure CORS for the backend Server. More details at: Cross-Origin Resource Sharing (CORS).
If you use backend from my tutorials, just change
origin
to*
.Just wanted to say thank you.