Axios HTTP Client: How to Send Axios POST, GET Request

Axios Example Tutorial From Scratch

Javascript Axios library can be used in your everyday JavaScript application or can be used together with more advanced frameworks like Vue.js, Angular, or Node.js.

Axios has lots of advantages over the native Fetch API:

  • It supports older browsers (Fetch needs a polyfill)
  • It has a way to abort a request.
  • It has a way to set a response timeout.
  • It has built-in CSRF protection.
  • It supports upload progress.
  • It performs automatic JSON data transformation.
  • It works with Node.js very well.

In this tutorial, you’ll learn how to install and add Axios to your project and perform an asynchronous HTTP request. We’ll cover a real-world scenario throughout this example.

Axios HTTP Client

Axios HTTP Client is the Promise-based HTTP client for the browser and node.js. Axios HTTP Client will teach you how to use Axios  POST request to the server or Axios GET request to fetch the data. It supports all modern browsers, including support for IE8 and higher.

It is promise-based, and this lets us write async/await code to perform XHR requests very quickly. Using Axios, It is effortless to send an asynchronous HTTP request to the server or REST endpoints and perform any CRUD operations.

We will use Axios with Node.js.

Okay, first, create one folder called axios-prac by the following command.

mkdir axios-prac
cd axios-prac

Now, we need to create the package.json file. So let us build using the following command.

npm init -y

Getting Started With Axios Promise Based HTTP Client Tutorial Example

Step 1: Install Axios HTTP Library.

Now, we need to install an Axios HTTP client library. We can install it using the npm or yarn.

npm install axios --save

# or

yarn add axios


Axios POST Tutorial Example

Step 2: Create the server.js file.

Inside the root folder, create one file called server.js.

We send an Axios GET request to the GitHub API and fetch the data. So let us add the following code inside the server.js file.

// server.js

const axios = require('axios');

async function getGithubData() {
  let res = await axios.get('');


Here, also we have used the async-await feature of ES7. Save the file, go to the terminal or CMD, and type the following command to run the node server.

node server

You can see that my name has been printed, which means we have successfully sent an HTTP Request using Axios.

So, this is how anyone can use Axios with Node.js. It is effortless. It is the primary example of Axios API. So, let us dive into Axios and get more details.

Axios API

You can start an HTTP request from the axios object: If you are using plain JavaScript, use axios in the following code.

  url: '',
  method: 'get'

But generally, we do not use the above syntax. Instead, we can use the following syntax.


Axios offers methods for all the HTTP verbs, which are less popular but still used:

  1. axios.put()
  2. axios.delete()
  3. axios.patch()
  4. axios.options()
  5. axios.head()

If we do not want to use async-await and use the promise to resolve the response, we can write the following code.

// server.js

const axios = require('axios');

function getGithubData() {
    .then(res => {


We will get the same result, but we have used a promise to resolve the request and get the data.

If the promise does not resolve, it will be rejected, and we can get an error in the catch block.

// server.js

const axios = require('axios');

function getGithubData() {
    .then(res => {
    .catch(err => {


We can also pass the parameter to the Axios GET Request. The syntax for that is the following.

axios.get('/user', {
    params: {
      ID: 12345
  .then(function (response) {
  .catch(function (error) {
  .then(function () {
    // always executed

Axios Request Config/Options

We can write the following code inside the JavaScript file if we need to set up the global config.['header1'] = 'value' // for POST requests
axios.defaults.headers.common['header1'] = 'value' // for all requests

We can send an Axios GET request with the Authorization Token. Let us say we need to add the JWT token in the request, and then we can write the following object with the request. 

See the following code snippet.

axios.get('', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token

We can also add the config object like the following code if we are working with the POST request.

let config = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  responseType: 'blob'
};'', data, config)
     .then((response) => {

So, here we have passed the three parameters in the Axios Post Request.

  1. URL (Where we need to send an HTTP request).
  2. Data (That needs to be posted and saved in the database).
  3. Request object.

So, you can pass the following options in the request.

  • baseUrl: if you specify a base URL, it’ll be prepended to any relative URL you use.
  • headers: It is an object of key-value pairs to be sent as headers.
  • params: an object of key/value pairs that will be serialized and appended to the URL as a query string.
  • responseType: if we want to get the response in a format other than JSON, we can set this property to arraybufferblobdocumenttext, or stream.
  • auth: Auth option is used when we need to pass an object with the username and password credentials for HTTP Basic authentication on the request.

Axios Response Object

When the HTTP request is successful sent, then () callback will receive a response object with the following properties:

  • data: the payload returned from the server. By default, Axios expects JSON and will parse this back into a JavaScript object for you.
  • status: the HTTP code returned from the server.
  • statusText: the HTTP status message returned by the server.
  • headers: all the headers sent back by the server.
  • config: the original request configuration.
  • request: the actual XMLHttpRequest object (when running in a browser).

Axios error object

If there is any problem with the axios request, the promise will be rejected with an error object containing the following properties:

  • message: the error message text.
  • response: the response object (if received), as described in the previous section.
  • request: the actual XMLHttpRequest object (when running in a browser).
  • config: the original request configuration.

Axios Post Request

Performing the Axios POST request is just like making a GET request, but instead of axios.get(), and you use

An object containing the POST parameters is the second argument:'', {
  foo: 'bar'

Axios Interceptors

We can intercept the request or response at some time, like sending a request or receiving the response object. Axios also allows us to add functions called interceptors. Like transforms, these interceptor functions can be attached to fire when a request is made or when a response is received.

// Add a request interceptor
axios.interceptors.request.use((config) => {
    // Do something before request is sent
    return config;
  }, (error) => {
    // Do something with request error
    return Promise.reject(error);

// Add a response interceptor
axios.interceptors.response.use((response) => {
    // Do something with response data
    return response;
  }, (error) => {
    // Do something with response error
    return Promise.reject(error);

Multiple Axios Requests simultaneously.

To execute multiple requests in parallel, provide an array argument to axios.all(). Then, when all requests are complete, you’ll receive an array containing the response objects in the same order they were sent.

Alternatively, you can use axios spread to spread the array into multiple arguments.

The spread is preferred since dealing with array indexes could be misleading.

// Requests will be executed in parallel...
  .then(axios.spread(function (userResponse, reposResponse) {
    //... but this callback will be executed only when both requests are complete.

Third-party Add-ons

Axios can benefit from an ecosystem of third-party libraries that extend its functionality. From interceptors to testing adaptors to loggers, there’s quite a variety available. Here are a few that I think you may find helpful:

  • axios-mock-adaptor: It allows you to easily mock requests to facilitate testing your code.
  • axios-cache-plugin: It is a wrapper for selectively caching GET requests.
  • redux-axios-middleware: If you’re a Redux user, this middleware provides a neat way to dispatch Ajax requests with open old actions.

Thanks for taking it.

Recommended Posts

React Axios

React Redux Axios

Vue Axios

Vuex Axios Get Request


  1. Hi Krunal,

    Thanks a lot for a lucid article.

    Can you please share an example of how to use the custom timeout with the axios.

  2. Great article!
    I found the axios.all function to be useful.
    Minor edit: the list of ‘axios.get’ requests in the in axios.all should be comma* separated.

    • do we have a way to get partial response from server? when server sends multiple flushes using the response writer. looking for something like a progress tracking.

  3. Hi Krunal
    Thanks for creating this.

    I have a question regarding installing axios.

    Please let me know how to correct these errors
    I am in Step 1 of your page i.e installing axios

    1. If I use npm I get the following error:
    `– axios@0.21.1
    `– follow-redirects@1.13.2

    npm WARN axios-prac@1.0.0 No description
    npm WARN axios-prac@1.0.0 No repository field.
    2. if I use yarn I get the following error
    yarn add axios
    ERROR: [Errno 2] No such file or directory: ‘add’

    Please let me know how to correct these errors.

    Thanks in advance

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.