Axios
Axios is an isomorphic promise-based library used to make the HTTP request for browsers and nodejs. This library uses native nodejs http modules on the server side and XMLHttpRequests on the browser or client side.
Below are some features available using Axios, which makes its use advisable:
- It automatically parses JSON data for us. We can avoid the extra step of parsing the incoming JSON response.
- It provides a way to cancel our made requests.
- It has built-in support for XSRF protection.
- It has methods available to track the upload progress.
- Simplifies and enhances the development and debugging experience.
This article will look into the setup of Axios for a project and explore its different available methods.
Axios setup
This section will look into how to set up Axios through NPM and CDN.
- USING NPM
To install Axios as a node module in the project, we need to enter the following command into the terminal:
npm install axios
After the installation is complete, we can use Axios by importing it into our file like this:
const axios = require(‘axios’)
- USING CDN
We can use any of the two available CDN < script > tags below in your HTML file before linking your javascript file in which you want to use Axios:
1. jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> </script>
2. unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
Axios GET method
This section will look into how to use the get method available with Axios.
SYNTAX:
axios.get( URL [ , option] )
CODE:
axios
.get(
"https://httpbin.org/get" ,
{
headers: {
"Content-Type": "application/json" ,
}
}
)
.then( (response) => {
console.log( response ) ;
})
.catch( (error) => {
console.log( error ) ;
});
OUTPUT:
{
"data" : {
"args" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc" : "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618d3d42-102af4ee202719d63e6be9a6"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/get"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "689" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true,
"forcedJSONParsing" : true,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 0 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*"
} ,
"method" : "get" ,
"url" : "https://httpbin.org/get"
} ,
"request" : { }
}
Let us take a look at the response object returned by Axios after the request:
- “data” - This corresponds to the payload or the data that is returned from the server after the request.
- “status” – This corresponds to the HTTP code returned after the request from the server.
- “statusText” - This corresponds to the HTTP status message returned after the request from the server.
- “headers” - This corresponds to the headers sent by the server-side with the response.
- “config” - This corresponds to the request configuration that was sent originally.
- “request” - This corresponds to the request object.
Axios POST method
This section will look into how to use the post method available with Axios.
SYNTAX:
axios.post( url [ , data [ , config ] ] )
CODE:
axios
.post (
"https://httpbin.org/post" ,
{
codes: "IN" ,
param: "param1" ,
param2: "param2" ,
date: new Date().toISOString().slice(0, 10)
} ,
{
headers: {
"Content-Type": "application/json" ,
Authorization: "TOKENTOKENTOKENTOKEN"
}
}
)
.then( (response) => {
console.log( response ) ;
} )
.catch( (error) => {
console.log(error) ;
} ) ;
OUTPUT:
{
"data" : {
"args" : { } ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}" ,
"files" : { } ,
"form" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Authorization" : "TOKENTOKENTOKENTOKEN" ,
"Content-Length" : "69" ,
"Content-Type" : "application/json" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc" : "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618d61a6-77efd95d629585007aa0451f"
} ,
"json" : {
"codes" : "IN" ,
"date" : "2021-11-11" ,
"param" : "param1" ,
"param2" : "param2"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/post"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "1049" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true ,
"forcedJSONParsing" : true ,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 0 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Content-Type" : "application/json" ,
"Authorization" : "TOKENTOKENTOKENTOKEN"
} ,
"method" : "post" ,
"url" : "https://httpbin.org/post" ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}"
} ,
"request" : { }
}
Axios PUT method
This section will look into how to use the put method available with Axios.
SYNTAX:
axios.put( url [ , data [ , config ] ] )
CODE:
axios
.put (
"https://httpbin.org/put" ,
{
codes: "IN" ,
param: "param1" ,
param2: "param2" ,
date: new Date().toISOString().slice(0, 10)
} ,
{
headers: {
"Content-Type": "application/json" ,
Authorization: "TOKENTOKENTOKENTOKEN"
}
}
)
.then( (response) => {
console.log( response ) ;
} )
.catch( (error) => {
console.log(error) ;
} ) ;
OUTPUT:
{
"data" : {
"args" : { } ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}" ,
"files" : { } ,
"form" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Authorization" : "TOKENTOKENTOKENTOKEN" ,
"Content-Length" : "69" ,
"Content-Type" : "application/json" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc" : "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618d61a6-77efd95d629585007aa0451f"
} ,
"json" : {
"codes" : "IN" ,
"date" : "2021-11-11" ,
"param" : "param1" ,
"param2" : "param2"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/put"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "1049" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true ,
"forcedJSONParsing" : true ,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 0 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Content-Type" : "application/json" ,
"Authorization" : "TOKENTOKENTOKENTOKEN"
} ,
"method" : "put" ,
"url" : "https://httpbin.org/put" ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}"
} ,
"request" : { }
}
Axios PATCH method
This section will look into how to use the patch method available with Axios.
SYNTAX:
axios.patch( url [ , data [ , config ] ] )
CODE:
axios
.patch (
"https://httpbin.org/patch" ,
{
codes: "IN" ,
param: "param1" ,
param2: "param2" ,
date: new Date().toISOString().slice(0, 10)
} ,
{
headers: {
"Content-Type": "application/json" ,
Authorization: "TOKENTOKENTOKENTOKEN"
}
}
)
.then( (response) => {
console.log( response ) ;
} )
.catch( (error) => {
console.log(error) ;
} ) ;
OUTPUT:
{
"data" : {
"args" : { } ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}" ,
"files" : { } ,
"form" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Authorization" : "TOKENTOKENTOKENTOKEN" ,
"Content-Length" : "69" ,
"Content-Type" : "application/json" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc" : "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618d61a6-77efd95d629585007aa0451f"
} ,
"json" : {
"codes" : "IN" ,
"date" : "2021-11-11" ,
"param" : "param1" ,
"param2" : "param2"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/patch"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "1049" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true ,
"forcedJSONParsing" : true ,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 0 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Content-Type" : "application/json" ,
"Authorization" : "TOKENTOKENTOKENTOKEN"
} ,
"method" : "patch" ,
"url" : "https://httpbin.org/patch" ,
"data" : "{\"codes\":\"IN\",\"param\":\"param1\",\"param2\":\"param2\",\"date\":\"2021-11-11\"}"
} ,
"request" : { }
}
Axios DELETE method
This section will look into how to use the delete method available with Axios.
SYNTAX:
axios.delete( url [ , config ] )
CODE:
axios
.delete (
"https://httpbin.org/delete" ,
{
headers: {
"Content-Type": "application/json" ,
Authorization: "TOKENTOKENTOKENTOKEN"
},
data: {
productId: "123456789",
},
}
)
.then( ( response ) => {
console.log( response ) ;
} )
.catch( ( error ) => {
console.log( error ) ;
} ) ;
OUTPUT:
{
"data" : {
"args" : { } ,
"data" : "{\"productId\":\"123456789\"}" ,
"files" : { } ,
"form" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Authorization" : "TOKENTOKENTOKENTOKEN" ,
"Content-Length" : "25" ,
"Content-Type" : "application/json" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc" : "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618ecb27-5852439e5f99e5ff0ba15f52"
} ,
"json" : {
"productId" : "123456789"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/delete"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "930" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true ,
"forcedJSONParsing" : true ,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 0 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Content-Type" : "application/json" ,
"Authorization" : "TOKENTOKENTOKENTOKEN"
} ,
"data" : "{\"productId\":\"123456789\"}" ,
"method" : "delete" ,
"url" : "https://httpbin.org/delete"
} ,
"request" : { }
}
Axios REQUEST method
This section will look into how to use the request method available with Axios. The request method takes a request configuration object which looks like:
{
url : '/get' ,
method : 'get' ,
baseURL : 'https://somewebsite.com/api’,
headers : { 'X-Requested-With' : 'XMLHttpRequest' } ,
params : {
searchValue : ‘apple’
} ,
data : {
productId : 123456789
} ,
timeout : 1000 ,
}
- “url” – This corresponds to the URl of the server to which the request has to be sent.
- “method” – This corresponds to the type of method of the request made. By default, it is set to “GET”.
- “baseURL” – This value will be prepended to the “url” value.
- “header” – This corresponds to the headers that will be sent with the request.
- “params” – This corresponds to a plain object that can contain any parameters that have to be sent with the request.
- “data” – This value is used to send the data with a PUT, POST, DELETE, or PATCH request.
- “timeout” – This corresponds to the value in milliseconds, after which the request will be timed out. The default is set to 0, which means no timeout.
SYNTAX:
axios.request( config )
We will try to execute a PUT request as an example.
CODE:
axios.request( {
url : '/put' ,
method : 'put' ,
baseURL : 'https://httpbin.org' ,
headers : { 'X-Requested-With' : 'XMLHttpRequest' } ,
params : {
ID : 12345
} ,
data : {
firstName : 'Fred'
} ,
timeout : 1000 ,
}
)
.then( (response) => {
console.log( response ) ;
} )
.catch( (error) => {
console.log(error) ;
} ) ;
OUTPUT:
{
"data" : {
"args" : {
"ID" : "12345"
} ,
"data" : "{\"firstName\":\"Fred\"}" ,
"files" : { } ,
"form" : { } ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Accept-Encoding" : "gzip, deflate, br" ,
"Accept-Language" : "en-IN,en-GB;q=0.9,en-US;q=0.8,en;q=0.7" ,
"Content-Length" : "20" ,
"Content-Type" : "application/json" ,
"Host" : "httpbin.org" ,
"Origin" : "https://cdpn.io" ,
"Referer" : "https://cdpn.io/" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Sec-Fetch-Site" : "cross-site" ,
"Sec-Gpc": "1" ,
"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" ,
"X-Amzn-Trace-Id" : "Root=1-618ed8bd-3f720d15499274e15cbad167" ,
"X-Requested-With" : "XMLHttpRequest"
} ,
"json" : {
"firstName" : "Fred"
} ,
"origin" : "122.161.76.2" ,
"url" : "https://httpbin.org/put?ID=12345"
} ,
"status" : 200 ,
"statusText" : "" ,
"headers" : {
"content-length" : "944" ,
"content-type" : "application/json"
} ,
"config" : {
"transitional" : {
"silentJSONParsing" : true ,
"forcedJSONParsing" : true ,
"clarifyTimeoutError" : false
} ,
"transformRequest" : [
null
] ,
"transformResponse" : [
null
] ,
"timeout" : 1000 ,
"xsrfCookieName" : "XSRF-TOKEN" ,
"xsrfHeaderName" : "X-XSRF-TOKEN" ,
"maxContentLength" : -1 ,
"maxBodyLength" : -1 ,
"headers" : {
"Accept" : "application/json, text/plain, */*" ,
"Content-Type" : "application/json" ,
"X-Requested-With" : "XMLHttpRequest"
} ,
"url" : "/put" ,
"method" : "put" ,
"baseURL" : "https://httpbin.org" ,
"params" : {
"ID" : 12345
} ,
"data" : "{\"firstName\":\"Fred\"}"
} ,
"request" : { }
}
Conclusion
This article looked into the installation of Axios and its implementation. We understood different features of Axios, and we also saw different examples of different requests using Axios. Now you can also implement these methods flawlessly.