Axios vs Fetch

Axios and Fetch are two popular ways to hit a backend server and get back response from there.

Axios is an external library whereas Fetch comes with both NodeJs and JavaScript i.e. it is a native browser API. Axios also provides us a lot of functionality as compared with Fetch. Since Axios is a third party library, it requires installation in our project and it can be installed using the command “npm install axios”.

Since Axios is simpler to use than Fetch, it is much popular among developers. (If you go through the whole article then you will understand why)

Photo by Roman Synkevych on Unsplash

Below is an example of how to get data using Fetch. The only constraint of using Fetch is that we have to be aware about the type of the data that is being fetched whether it is a JSON data or is any textual data.

Below we are considering the data being fetched is of JSON type.

async function main() {
  const response = await fetch("Url you want to hit");
  const json = await response.json();
  console.log(json);
}

Now using Axios

While using Axios we have not to worry about the type of data that is coming from backend thus the programmer need not to worry about the nature of the data.

Below is a simple example of axios get request from a server.

const axios = require('axios');

async function main() {
  const response = await axios.get("url to enter");
  console.log(response.data);
}

Here, response.data results in getting the data easily without worrying about its nature.

Now to post something on the server, here’s how we do it using Axios vs Fetch.

First we will see how we do it using Fetch.

async function main() {
  const response = await fetch("url to enter" , {
    method: "POST"
  });
  const json = await response.json();
  console.log(json);
}

Here’s how we do the same thing using Axios.

async function main() {
  const response = await axios.post("url to enter");
  console.log(response.data);
}

Here’s another example of how we send body and headers while posting something on the server.

const main = async () => {
  const response = await axios.post("url to enter", {
    username: "Rishu2",
    password: "rishu2",
  },
  {
    headers: {
      Authorization: "Bearer 12111",
    }                                    
  });
};

Always remember, for get request we can’t send body as second parameter. for sending some data in get request, we send it through query parameter.

For more simplicity there’s another method through which we can work with Axios. Here we pass an object as parameter.

const main = async () => {
  const response = await axios({
    url: " https://httpdump.app/dumps/1a8d2d23-1d33-4749-8fab-4b38fe6e0b07",
    method: "POST",
    headers: {
      Authorization: "Bearer 123",
    },
    data: {
      username: "Rishu123",
      password: "Rishu111"
    }
  });
  console.log(response.data);
};

The URL you are seeing above is the URL provided by “httdump.com” which is completely free service that gives us a unique URL to send requests and to inspect them.

Thus we can conclude that if we are looking for a easy to use library for making HTTP request then Axios is a good choice. It provides us a number of features that make it easier to write and maintain code such as automatic JSON parsing and error error handling.

But if you are looking for a lightweight library that does not provide a lot of features and with minimal use case then Fetch is a good choice. Since it is a native browser API so it is supported by all modern browsers.