Axios vs Fetch

Which one should you use and why?

Perhaps you are new to Javascript and are learning how to make HTML requests, or you have learned about fetch but have heard about alternatives. This is the article for you! It should come to no surprise that requesting data from a back-end source is important when building any sort of application. This could come from a third party API or even a back-end source such as Node.js or Rails.

But let’s get started with learning a little bit about .fetch()!

.fetch()

Fetch is a built-in API used within Javascript to access and manipulate HTTP requests and responses. Fetch allows us to receive this data asynchronously without installing extra libraries. It accomplishes what was previously achieved using XMLHttpRequest, but fetch() utilizes Promises within the request to await the JSON response within the fetch() request. Let’s see what a fetch request looks like:

fetch('http://exampleAPI.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

This simple data request is using a default GET request in order to fetch data from the example API. It is mandatory to have a URL within the fetch request, but it is not mandatory to add anything to the body for other HTTP requests such as POST, DELETE, etc. Here is an example of a fetch request with a body:

fetch('https://exampleAPI.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

The requested data doesn’t come in JSON format so it must be translated, and the most common way is by using response.json(). Some other options are response.text(), response.blob(), etc.

But what is Axios?

Axios is also based on the notion of Promises, and is set up similarly to a fetch() request. It is a Javascript library that makes HTTP requests from Node, a browser, or XMLHttpRequest.

axios.get(url)  
.then((response) => console.log(response))  
.catch((error) => console.log(error));

The argument is that axios is the better alternative in comparison to fetch for requests and additions for a number of reasons.

1. Axios returns JSON data by default without having to convert the data with JSON.stringify (like in fetch).
2. Axios can protect against Cross-Site Request Forgery, which is basically an unwanted or unauthorized command from a user.
3. Axios can work with a wider range of browsers, even older versions of internet explorer — so this is preferable if you are looking for something that works with a wider range of compatibility.

With this information, it’s up to you to choose what works best for you! In my opinion, axios has been more beneficial for me in personal projects, and has worked more efficiently than its popular counterpart, .fetch().