JS HTTP Request using Axios POST and GET Method Tutorial

jack554 · 2025-02-27T03:17:12+0000

In this tutorial, I will show how to use JS HTTP Request using Axios POST and GET Methods. The tutorial aims to provide IT/CS students and new programmers with a reference to learn with to enhance their knowledge and skill using JavaScript and Axios. Here, the step-by-step tutorial with snippets of implementing HTTP Requests using Axios is provided. A sample web application source code that demonstrates the objective of this tutorial is also provided and the source code zip file is free to download.

What is Axios?

A promise-based HTTP Client for the browser and node.js is called Axios. It can run in both a browser and Node.js using the same code because it is isomorphic. The client (browser) uses XMLHttpRequests, whereas the server uses the built-in node.js HTTP module.

How to use Axios POST and GET Methods?

To use Axios POST and GET Methods, the first thing you must do is install the package or load the Axios script using CDN.

Installing Axios

/**
* Using NPM
*/
$ npm install axios
/**
* Using Yarn
*/
$ yarn add axios
/**
* Using Bower
*/
$ bower install axios

Using CDN

<script

src

=

"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"

></

script

>
<script

src

=

"https://unpkg.com/axios/dist/axios.min.js"

></

script

>

Axios POST Method syntax

The below snippets demonstrate the syntax of how to implement or execute the Axios Post Method.

/**
* Axios Post Method : Syntax Example 1
*/
axios(

{
method:

'post'

,
url:

'yourapiurlhere.php'

,
headers:

{
'Content-Type'

:

'application/x-www-form-urlencode'
}

,
data:

{
'name'

:

'Claire Blake'

,
'email'

:

'[email protected]'
}
}

)

.then

(

response =>

{
//Request's Response
console.log

(

response)
}

)

.catch

(

error =>

{
// Catch Request's Error
console.error

(

error)
}

)
/**
* Axios Post Method : Syntax Example 2
*/
var

data =

new

FormData(

)

;
data.append

(

'name'

,

'Claire Blake'

)
data.append

(

'email'

,

'[email protected]'

)
axios.post

(

'yourapiurlhere.php'

,

{
headers:

{
'content-type'

:

'application/x-www-form-urlencode'
}
}

)

.then

(

response =>

{
//Request's Response
console.log

(

response)
}

)

.catch

(

error =>

{
// Catch Request's Error
console.error

(

error)
}

)

Axios GET Method syntax

The below snippets demonstrate the syntax of how to implement or execute the Axios GET Method.

/**
* Axios Post Method : Syntax Example 1
*/
axios(

{
method:

'get'

,
url:

'test.json'

,
responseType:

'json'
}

)

.then

(

response =>

{
//Request's Response
console.log

(

response)
}

)

.catch

(

error =>

{
// Catch Request's Error
console.error

(

error)
}

)
/**
* Axios Post Method : Syntax Example 2
*/
axios.post

(

'test.json'

,

{
responseType:

'json'
}

)

.then

(

response =>

{
//Request's Response
console.log

(

response)
}

)

.catch

(

error =>

{
// Catch Request's Error
console.error

(

error)
}

)
/**
* Axios Post Method : Syntax Example 3
*/
axios(

'data.json'

)

.then

(

response =>

{
//Request's Response
console.log

(

response)
}

)

.catch

(

error =>

{
// Catch Request's Error
console.error

(

error)
}

)

Example

The snippets that I have provided below are the scripts for a simple actual web application that demonstrates the Axios GET and POST Methods. Try to copy the snippets on your end to test it on your side.

Interface

The snippet below is the page interface of the application which contains a simple interface with a navbar, buttons, and a response field. The script loads the Axios and Bootstrap Framework using CDN. Save this file as index.html.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

JS HTTP Request using Axios</

title

>
<link

rel

=

"stylesheet"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"

integrity=

"sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

/

>
<link

rel

=

"stylesheet"

href

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

integrity=

"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"

crossorigin=

"anonymous"

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"

integrity=

"sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

></

script

>
<script

src

=

"https://code.jquery.com/jquery-3.6.1.js"

integrity=

"sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="

crossorigin=

"anonymous"

></

script

>
<script

src

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity=

"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"

crossorigin=

"anonymous"

></

script

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.0/axios.min.js"

integrity=

"sha512-OdkysyYNjK4CZHgB+dkw9xQp66hZ9TLqmS2vXaBrftfyJeduVhyy1cOfoxiKdi4/bfgpco6REu6Rb+V2oVIRWg=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

></

script

>
<style

>
html, body{
min-height:100%;
width:100%;
}
tbody:empty:after{
content:'No records found'
}
</

style

>
</

head

>
<body

>
<nav class

=

"navbar navbar-expand-lg navbar-dark bg-primary bg-gradient"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"./"

>

JS HTTP Request using Axios</

a

>
<div

>
<a

href

=

"https://sourcecodester.com"

class

=

"text-light fw-bolder h6 text-decoration-none"

target

=

"_blank"

>

SourceCodester</

a

>
</

div

>
</

div

>
</

nav>
<div

class

=

"container-fluid px-5 my-3"

>
<div

class

=

"col-lg-5 col-md-7 col-sm-12 mx-auto"

>
<h3

class

=

"text-center"

><b

>

Axios POST and GET Method</

b

></

h3

>
<div

class

=

"d-flex w-100 justify-content-center"

>
<hr

class

=

"w-50"

>
</

div

>
<div

class

=

"card rounded-0 shadow mb-3"

>
<div

class

=

"card-body"

>
<div

class

=

"container-fluid"

>
<div

class

=

"mb-3"

>
<div

class

=

"d-flex justify-content-center"

>
<button

class

=

"btn btn-primary rounded-pill col-lg-3 col-md-5 col-sm-12 me-2"

id

=

"GetBtn"

>

Get</

button

>
<button

class

=

"btn btn-info rounded-pill col-lg-3 col-md-5 col-sm-12 me-2"

id

=

"PostBtn"

>

Post</

button

>
</

div

>
</

div

>
<hr

>
<label

for

=

""

class

=

"form-label"

>

Response</

label

>
<pre

id

=

"response-field"

class

=

"bg-dark p-3 text-light"

>
</

pre

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

body

>
<script

src

=

"./script.js"

></

script

>
</

html

>

Sample JSON Data

The following snippet is a sample JSON Data that will be used for fetching the data on the application using the Axios GET Method. Save the file as data.json

[
{
"name"

:

"Ella Daniel"

,
"email"

:

"[email protected]"

,
"phone"

:

"(567) 380-9992"
}

,
{
"name"

:

"Melyssa Cantrell"

,
"email"

:

"[email protected]"

,
"phone"

:

"1-526-413-2563"
}

,
{
"name"

:

"Chaim Buchanan"

,
"email"

:

"[email protected]"

,
"phone"

:

"1-316-685-9786"
}

,
{
"name"

:

"Desiree Welch"

,
"email"

:

"[email protected]"

,
"phone"

:

"(591) 884-4171"
}

,
{
"name"

:

"Hu Ward"

,
"email"

:

"[email protected]"

,
"phone"

:

"(858) 403-3635"
}
]

Sample Post API

The snippet below is the sample PHP script that serves as an API that receives post data and returns the POST Data as the response data of the HTTP Request. Save the file post-api.php.

<?php
if

(

$_SERVER

[

'REQUEST_METHOD'

]

==

"POST"

)

{
echo

json_encode

(

$_POST

)

;
}

else

{
echo

json_encode

(

[

'error'

=>

'Request is not a POST Method'

]

)

;
}

Creating the Main Script

Here's the snippet of the main script that achieves our objective for this tutorial. It is a JavaScript file that contains the script for executing both Axios POST and GET Method HTTP Requests. Save the file as script.js.

var

getBtn =

document.getElementById

(

'GetBtn'

)
var

postBtn =

document.getElementById

(

'PostBtn'

)
var

responseField =

document.getElementById

(

'response-field'

)
/**
* AXIOS GET METHOD
* @ axios.get(URL,[config])
*/
getBtn.addEventListener

(

'click'

,

function

(

e)

{
responseField.innerHTML

=

`HTTP Request using Axios GET Method is on process...`;
axios.get

(

"data.json"

,

{

}

)
.then

(

response =>

{
setTimeout(

(

)

=>

{
// Delaying the Response to Display for 2 seconds
responseField.innerHTML

=

JSON.stringify

(

response,

null

,

3

)
}

,

2000

)
}

)
.catch

(

error =>

{
console.error

(

error)
responseField.innerHTML

=

JSON.stringify

(

error,

null

,

3

)
}

)
}

)
/**
* AXIOS POST METHOD
* @ axios.post(URL, data,[config])
*/
postBtn.addEventListener

(

'click'

,

function

(

e)

{
responseField.innerHTML

=

`HTTP Request using Axios POST Method is on process...`;
var

formData =

new

FormData(

)

;
formData.append

(

"name"

,

"Mark Cooper"

)
formData.append

(

"email"

,

"[email protected]"

)
formData.append

(

"address"

,

"Lot 14 Block 23, 6 St, Here City, Overthere"

)
axios.post

(

"post-api.php"

,

formData,

{
"headers"

:

{

"content-type"

:

'application/x-www-form-urlencoded'

}

,
"responseType"

:

'json'
}

)
.then

(

response =>

{
setTimeout(

(

)

=>

{
// Delaying the Response to Display for 2 seconds
responseField.innerHTML

=

JSON.stringify

(

response,

null

,

3

)
}

,

2000

)
}

)
.catch

(

error =>

{
console.error

(

error)
responseField.innerHTML

=

JSON.stringify

(

error,

null

,

3

)
}

)
}

)

Snapshot

Here's the snapshot of the sample web application's page interface.

That's it! I have also provided the complete source code zip file that I created and provided above for this tutorial. You can download it by clicking the Download Button located below this article.

That's the end of this tutorial. I hope this JS HTTP Request using Axios POST and GET Method Tutorial helps you with what you are looking for and that you'll find this useful for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding:)

Download

You must upgrade your account or reply in the thread to view hidden text.

JS HTTP Request using Axios POST and GET Method Tutorial

More options

jack554

449,193

322,229

322,238