Is axios better than fetch?

A while ago, when I was still in Flatiron, I wrote a blog about fetch(). For a while, fetch was how I always communicated with servers using the HTTP protocol. Writing all the boilerplate code came naturally for me and I didn’t think much of how else I would be able to pull data from a server. However, working through multiple Udemy courses and reading some blogs, I noticed some people completely forgo the use of fetch and instead use a library called axios. I thought to myself “Why the hell would I use a library to make HTTP requests? That’s just extra work!” Well, it turns out I was wrong. Let’s take a look at why we would want to go with axios over fetch.

The overview of both

Fetch is a built-in JavaScript API used to interact with anything HTTP. It makes use of Request and Response objects as well as Promises. Let’s look at an example of a POST request using fetch:

We call the fetch method on a string of a URL, then input what HTTP verb we want to do. Then, we go into the content-type, the body, and the things we want to do with the data afterwards.

Axios is a JavaScript library that is also used to interact with anything HTTP on a browser or Node.JS platform. Axios can also used Promises. Let’s take a look at how to do a POST request using axios:

The differences between both

I’m sure the first thing that jumped out to you is how clean the syntax is for axios. This is the first of several reasons why I prefer to work with axios whenever I can. Using fetch means having to deal with a lot more code and cleaner code is always a plus. Now you might be thinking “well, how do we deal with all the things like content-type and JSON.stringify?”. Axios automatically parses things to JSON, so you wouldn’t have to declare anything unless you want to send things in another format.

Another thing that I don’t really like about fetch is that it doesn’t throw any errors when a server responds with an error code like 404. This can make bugfixing a little more tedious as I might not necessarily catch when data I’m trying to pass doesn’t go through as intended. Axios, on the other hand, does throw an error when a server responds with an error code, all you have to do is use the catch() method.

Those two reasons are why I personally use axios over fetch now. It ain’t much, but there’s a ton of other things I can do with axios that fetch can’t if I wanted to, like add these things called “interceptors”. Interceptors allows you to access HTTP requests and responses and do things to them before their action is completed. For example, if I want to automatically include an authorization token in a request, I can do this:

Now, every time I send out a request, that token will automatically be included in the authorization header of that request.

There’s a ton of other stuff axios can do that fetch can’t. Axios is even more widely supported across browsers than fetch, despite fetch being native to JavaScript! You can also set response timeouts in Axios if no information has come in after a while. So there, that’s why I like using axios over fetch.

Software engineer