Fetch() vs Axios

I've previously written about doing simple fetch() requests in JS before. Moving into Ruby, I seemed to glaze past this fun way of creating a fetch request in much less code and in a shorter amount of time. Because what are programmers if not lazy, always searching for the next available hack to make typing faster, easier, and cleaner.

Axios is a package that can be installed quite easily in any React Application with a simple npm install axios, add the import on the component you choose to work on and viola! You have access to a promise based HTTP Client for your browser.

Let's a look into the differences between the two starting with the basic syntax. First off, Axios needs fewer lines of code for a post request because it does away with the need to have a body property to send data to the endpoint where as Axios uses the data property. Another aspect that differs in syntax is the fact that Axios does not need the JSON.stringify method because it automatically converts data to JSON transforming the data returned from the server while only needing a simple header. With fetch(), you have to parse out the data to a JS object by calling the response.json method.

const url = "http://url.com"
const data = { name: Tom, age: 20}

axios.post(url, data, { 
headers: {"Content-Type" :"application/json"} 
})
.then(res => console.log(res.data)

VS

const url = "http://url.com"
fetch(url, {
method: "POST"
headers: { "Content-Type" :"application/json"
},
body: JSON.stringify ({
name: "Tom",
age: "20"
})
})
.then(res => res.json())
.then(data => console.log(data))

Another way that Axios differs is how you can override the default behavior that automatically happens when sending data back to the server previously mentioned. You can actually redefine the transformation that occurs, but with fetch(), you'd have to do it manually. Let's see how this is done with a get request.

axios.get("http://url.com")
.then(res => console.log(res.data)
error => {
console.log(error)

vs

fetch("http://url.com")
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Although you'd have one additional line of code with fetch() it's kinda nice to not have to JSON-ify the data on a get request when Axios can do this for you. However, they can both fetch and parse the data the same way.

Another interesting point of note is backward compatibility. Axios is quite popular in this aspect because it runs XMLHttpRequest under the hood which makes it easier to run with little issue on a wide range of browsers, including older browsers like IE11. On the other hand fetch() is currently only supported on current versions of Chrome, Firefox, Edge, and Safari which isn't to say that this long list isn't wide ranging either. However, you'd need to implement a polyfill for fetch() which this explains how to do, but can add additional steps to simply allow fetch to be accepted on older browsers whereas Axios can already do the work without the extra work. See? We are lazy..

The examples above implement the same functionality so deciding on which to use is personal preference and up to the developer as to what would work best for your project. There are many other really great examples as to how Axios makes life a little easier which can be read here by Faraz Kelhini, especially when compared with fetch().

Resources:
Axios Documentation